Typora设置侧边栏、目录、内容标题自动编号以及修改编号格式

2020年11月6日 131次阅读 来源: qq_37892403

目录

Typora默认标题是无法自动编号的，需要修改设置才能使用
Typora官网给的修改方式是：http://support.typora.io/Auto-Numbering/.【英文】

1 内容中的标题修改

  1. 打开软件的主题文件夹：文件 –>偏好设置 –>外观 –>打开主题文件夹
    《Typora设置侧边栏、目录、内容标题自动编号以及修改编号格式》
    《Typora设置侧边栏、目录、内容标题自动编号以及修改编号格式》

  2. 在themes文件夹中创建文件【base.user.css】
    《Typora设置侧边栏、目录、内容标题自动编号以及修改编号格式》

  3. 在文件base.user.css中添加以下内容

/** initialize css counter */
#write { 
    counter-reset: h1
}

h1 { 
    counter-reset: h2
}

h2 { 
    counter-reset: h3
}

h3 { 
    counter-reset: h4
}

h4 { 
    counter-reset: h5
}

h5 { 
    counter-reset: h6
}

/** put counter result into headings */
#write h1:before { 
    counter-increment: h1;
    content: counter(h1) ". "
}

#write h2:before { 
    counter-increment: h2;
    content: counter(h1) "." counter(h2) ". "
}

#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ { 
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". "
}

#write h4:before, h4.md-focus.md-heading:before { 
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}

#write h5:before, h5.md-focus.md-heading:before { 
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}

#write h6:before, h6.md-focus.md-heading:before { 
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}

/** override the default style for focused headings */
#write>h3.md-focus:before, #write>h4.md-focus:before, #write>h5.md-focus:before, #write>h6.md-focus:before, h3.md-focus:before, h4.md-focus:before, h5.md-focus:before, h6.md-focus:before { 
    color: inherit;
    border: inherit;
    border-radius: inherit;
    position: inherit;
    left:initial;
    float: none;
    top:initial;
    font-size: inherit;
    padding-left: inherit;
    padding-right: inherit;
    vertical-align: inherit;
    font-weight: inherit;
    line-height: inherit;
}
  1. 保存后重启Typora即可显示

问题：只能在文本中显示，目录中无法显示
原因：目录和文本使用不同的方式渲染，是要对目录也进行设置才能显示

2 目录和内容标题都自动编号

Typora官网给的修改方式是： http://pastebin.com/NYugSbXk
与上述操作没有区别，只是添加内容不同

/************************************** * Header Counters in TOC **************************************/
 
/* No link underlines in TOC */
.md-toc-inner { 
    text-decoration: none;
}
 
.md-toc-content { 
    counter-reset: h1toc
}
 
.md-toc-h1 { 
    margin-left: 0;
    font-size: 1.5rem;
    counter-reset: h2toc
}
 
.md-toc-h2 { 
    font-size: 1.1rem;
    margin-left: 2rem;
    counter-reset: h3toc
}
 
.md-toc-h3 { 
    margin-left: 3rem;
    font-size: .9rem;
    counter-reset: h4toc
}
 
.md-toc-h4 { 
    margin-left: 4rem;
    font-size: .85rem;
    counter-reset: h5toc
}
 
.md-toc-h5 { 
    margin-left: 5rem;
    font-size: .8rem;
    counter-reset: h6toc
}
 
.md-toc-h6 { 
    margin-left: 6rem;
    font-size: .75rem;
}
 
.md-toc-h1:before { 
    color: black;
    counter-increment: h1toc;
    content: counter(h1toc) ". "
}
 
.md-toc-h1 .md-toc-inner { 
    margin-left: 0;
}
 
.md-toc-h2:before { 
    color: black;
    counter-increment: h2toc;
    content: counter(h1toc) ". " counter(h2toc) ". "
}
 
.md-toc-h2 .md-toc-inner { 
    margin-left: 0;
}
 
.md-toc-h3:before { 
    color: black;
    counter-increment: h3toc;
    content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". "
}
 
.md-toc-h3 .md-toc-inner { 
    margin-left: 0;
}
 
.md-toc-h4:before { 
    color: black;
    counter-increment: h4toc;
    content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". "
}
 
.md-toc-h4 .md-toc-inner { 
    margin-left: 0;
}
 
.md-toc-h5:before { 
    color: black;
    counter-increment: h5toc;
    content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) ". "
}
 
.md-toc-h5 .md-toc-inner { 
    margin-left: 0;
}
 
.md-toc-h6:before { 
    color: black;
    counter-increment: h6toc;
    content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) " " counter(h6toc) ". "
}
 
.md-toc-h6 .md-toc-inner { 
    margin-left: 0;
}
 
/************************************** * Header Counters in Content **************************************/
/** initialize css counter */
#write { 
    counter-reset: h1
}

h1 { 
    counter-reset: h2
}

h2 { 
    counter-reset: h3
}

h3 { 
    counter-reset: h4
}

h4 { 
    counter-reset: h5
}

h5 { 
    counter-reset: h6
}

/** put counter result into headings */
#write h1:before { 
    counter-increment: h1;
    content: counter(h1) ". "
}

#write h2:before { 
    counter-increment: h2;
    content: counter(h1) "." counter(h2) ". "
}

#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ { 
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) ". "
}

#write h4:before, h4.md-focus.md-heading:before { 
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}

#write h5:before, h5.md-focus.md-heading:before { 
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}

#write h6:before, h6.md-focus.md-heading:before { 
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}

/** override the default style for focused headings */
#write>h3.md-focus:before, #write>h4.md-focus:before, #write>h5.md-focus:before, #write>h6.md-focus:before, h3.md-focus:before, h4.md-focus:before, h5.md-focus:before, h6.md-focus:before { 
    color: inherit;
    border: inherit;
    border-radius: inherit;
    position: inherit;
    left:initial;
    float: none;
    top:initial;
    font-size: inherit;
    padding-left: inherit;
    padding-right: inherit;
    vertical-align: inherit;
    font-weight: inherit;
    line-height: inherit;
}

修改后的效果：
《Typora设置侧边栏、目录、内容标题自动编号以及修改编号格式》

3 侧边栏、目录、内容的标题都自动编号

当然，侧边栏也是独立的，需要添加其他内容。代码很长，我不就不写了，请看这位仁兄的代码https://blog.csdn.net/zhongqi2513/article/details/105123345

4 修改编号格式

我不喜欢每个编号最后的点，所有又修改了一下内容，去掉了编号最后的点
效果：
《Typora设置侧边栏、目录、内容标题自动编号以及修改编号格式》
操作：
在包含before标签内容的content属性：counter是每个h标签的数字，引号【””】内的内容是h标签之间的连接内容
去掉最后一个引号内的点【.】即可
如：

/* 目录中原来的h6标签代码*/
.md-toc-h6:before { 
    color: black;
    counter-increment: h6toc;
    content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) ". " counter(h6toc) ". "  /* 原来最后的引号内有点*/
}
/* 目录中修改后的h6标签代码*/
.md-toc-h6:before { 
    color: black;
    counter-increment: h6toc;
    content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) ". " counter(h6toc) " "   /* 去掉后最后的引号内没有点，只有空格*/
}
/* ******************************************************************************** */
/* 内容中原来的h6标签代码*/
h6.md-focus.md-heading:before { 
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}
/* 内容中修改后的h6标签代码*/
h6.md-focus.md-heading:before { 
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " "
}

**需要修改6个标签中所有的before标签内的content属性，一共12个

修改后代码：

/************************************** * Header Counters in TOC **************************************/
 
/* No link underlines in TOC */
.md-toc-inner { 
    text-decoration: none;
}
 
.md-toc-content { 
    counter-reset: h1toc
}
 
.md-toc-h1 { 
    margin-left: 0;
    font-size: 1.5rem;
    counter-reset: h2toc
}
 
.md-toc-h2 { 
    font-size: 1.1rem;
    margin-left: 2rem;
    counter-reset: h3toc
}
 
.md-toc-h3 { 
    margin-left: 3rem;
    font-size: .9rem;
    counter-reset: h4toc
}
 
.md-toc-h4 { 
    margin-left: 4rem;
    font-size: .85rem;
    counter-reset: h5toc
}
 
.md-toc-h5 { 
    margin-left: 5rem;
    font-size: .8rem;
    counter-reset: h6toc
}
 
.md-toc-h6 { 
    margin-left: 6rem;
    font-size: .75rem;
}
 
.md-toc-h1:before { 
    color: black;
    counter-increment: h1toc;
    content: counter(h1toc) " "
}
 
.md-toc-h1 .md-toc-inner { 
    margin-left: 0;
}
 
.md-toc-h2:before { 
    color: black;
    counter-increment: h2toc;
    content: counter(h1toc) ". " counter(h2toc) " "
}
 
.md-toc-h2 .md-toc-inner { 
    margin-left: 0;
}
 
.md-toc-h3:before { 
    color: black;
    counter-increment: h3toc;
    content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) " "
}
 
.md-toc-h3 .md-toc-inner { 
    margin-left: 0;
}
 
.md-toc-h4:before { 
    color: black;
    counter-increment: h4toc;
    content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) " "
}
 
.md-toc-h4 .md-toc-inner { 
    margin-left: 0;
}
 
.md-toc-h5:before { 
    color: black;
    counter-increment: h5toc;
    content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) " "
}
 
.md-toc-h5 .md-toc-inner { 
    margin-left: 0;
}
 
.md-toc-h6:before { 
    color: black;
    counter-increment: h6toc;
    content: counter(h1toc) ". " counter(h2toc) ". " counter(h3toc) ". " counter(h4toc) ". " counter(h5toc) ". " counter(h6toc) " "
}
 
.md-toc-h6 .md-toc-inner { 
    margin-left: 0;
}
 
/************************************** * Header Counters in Content **************************************/
 
/** initialize css counter */
#write { 
    counter-reset: h1
}

h1 { 
    counter-reset: h2
}

h2 { 
    counter-reset: h3
}

h3 { 
    counter-reset: h4
}

h4 { 
    counter-reset: h5
}

h5 { 
    counter-reset: h6
}

/** put counter result into headings */
#write h1:before { 
    counter-increment: h1;
    content: counter(h1) " "
}

#write h2:before { 
    counter-increment: h2;
    content: counter(h1) "." counter(h2) " "
}

#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ { 
    counter-increment: h3;
    content: counter(h1) "." counter(h2) "." counter(h3) " "
}

#write h4:before, h4.md-focus.md-heading:before { 
    counter-increment: h4;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " "
}

#write h5:before, h5.md-focus.md-heading:before { 
    counter-increment: h5;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " "
}

#write h6:before, h6.md-focus.md-heading:before { 
    counter-increment: h6;
    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " "
}



/** override the default style for focused headings */
#write>h3.md-focus:before, #write>h4.md-focus:before, #write>h5.md-focus:before, #write>h6.md-focus:before, h3.md-focus:before, h4.md-focus:before, h5.md-focus:before, h6.md-focus:before { 
    color: inherit;
    border: inherit;
    border-radius: inherit;
    position: inherit;
    left:initial;
    float: none;
    top:initial;
    font-size: inherit;
    padding-left: inherit;
    padding-right: inherit;
    vertical-align: inherit;
    font-weight: inherit;
    line-height: inherit;
}

连接符号也可以修改，如把引号内的点修改成破折号【-】
《Typora设置侧边栏、目录、内容标题自动编号以及修改编号格式》

    原文作者：qq_37892403
    原文地址: https://blog.csdn.net/qq_37892403/article/details/109606737
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞