Andymatuschak Mode in Siyuan

The first step : the original link: Andy Matuschak.

The second step : snippet:

css snippet:

.layout__center div.layout-tab-container.fn__flex-1 > div.fn__flex-1.fn__none {
    display: flex !important;
    min-width: 600px;
    border-radius: 0.75em;
    border: 2px solid var(--b3-border-color);
    margin: 10px;
}

.layout__center div.layout-tab-container.fn__flex-1 > div.fn__flex-1 {
    display: flex !important;
    min-width: 600px;
    border-radius: 0.75em;
    border: 2px solid var(--b3-border-color);
    margin: 10px;
}

javascript

document.querySelectorAll('li[data-type="tab-header"]').forEach(tab => {
    if (tab && tab.getAttribute('data-type') === 'tab-header') {
        console.log('Clicking tab with data-id:', tab.getAttribute('data-id'));
        tab.click();
    }
});

document.querySelectorAll('li[data-type="tab-header"]').forEach(tab => {
    // 用户点击标签页时平滑滚动到对应的内容区域，不支持右边的标签页菜单
    tab.addEventListener('click', () => {
        const tabId = tab.getAttribute('data-id');
        const content = document.querySelector(`.layout__center .fn__flex-1.protyle[data-id="${tabId}"], .layout__center .fn__flex-1.protyle.fn__none[data-id="${tabId}"]`);
        if (content) {
            content.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
        }
    });
});