Joplin实现侧边栏目录

最新推荐文章于 2024-08-16 08:18:12 发布

susalt

最新推荐文章于 2024-08-16 08:18:12 发布

阅读量2.8k

点赞数 2

分类专栏：日常文章标签： android javascript 开发语言

日常专栏收录该内容

7 篇文章

订阅专栏

本文详细指导如何在Joplin中修改显示Markdown的自定义样式，创建一个可滑动的侧边栏目录，以便于阅读长文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 流程步骤

（1）打开Joplin

在这里插入图片描述

（2）然后点击“菜单栏”–>“工具”–>“选项”–>“外观”

在这里插入图片描述

（3）然后点击“显示高级选项”–>“适用于已渲染Markdown的自定义样式表”

在这里插入图片描述

（4）然后出现一个文本文件

在这里插入图片描述

（5）将以下代码copy进文件里，保存、重启Joplin

nav.table-of-contents ul {
    list-style-type: none;
    margin-top: 0px;
    margin-bottom: 0px;
}

nav.table-of-contents>ul {

    top: 5px;
    right: 0px;
    z-index: 99;
    
    font-size: 12px;
    position: fixed;
    padding: 15px;
    
    border-radius: 10px 0px 0px 10px;
    margin: 0px;
    
    overflow: hidden;
    height: 90%;
    width: 5px;
    transition: .2s;
}
nav.table-of-contents::after {
    content: "[目录 - 请将你的鼠标移至程序的右边]";
    color: black;
}

nav.table-of-contents>ul:hover {
    background: #F8F8F8;
    box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.15);

    width: 30%;
    color: none;
    overflow: scroll;
}

nav.table-of-contents>ul:hover::before {
    content: "目录"
}

nav.table-of-contents>ul:hover li {
    display: list-item;
}

nav.table-of-contents li {
    display: none;
    white-space: nowrap;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}


    #rendered-md {
    width: 100%;
    }
}