mirror of https://github.com/status-im/codimd.git
Merge pull request #1532 from freitagsrunde/feature/customTocLevel
Set TOC depth freely for every note by using YAML metadata or an option within `[toc]`
This commit is contained in:
commit
ee1230b6f4
|
@ -188,5 +188,6 @@ module.exports = {
|
|||
// 2nd appearance: "31-good-morning-my-friend---do-you-have-5-1"
|
||||
// 3rd appearance: "31-good-morning-my-friend---do-you-have-5-2"
|
||||
linkifyHeaderStyle: 'keep-case',
|
||||
autoVersionCheck: true
|
||||
autoVersionCheck: true,
|
||||
defaultTocDepth: 3
|
||||
}
|
||||
|
|
|
@ -147,5 +147,6 @@ module.exports = {
|
|||
openID: toBooleanConfig(process.env.CMD_OPENID),
|
||||
defaultUseHardbreak: toBooleanConfig(process.env.CMD_DEFAULT_USE_HARD_BREAK),
|
||||
linkifyHeaderStyle: process.env.CMD_LINKIFY_HEADER_STYLE,
|
||||
autoVersionCheck: toBooleanConfig(process.env.CMD_AUTO_VERSION_CHECK)
|
||||
autoVersionCheck: toBooleanConfig(process.env.CMD_AUTO_VERSION_CHECK),
|
||||
defaultTocDepth: toIntegerConfig(process.env.CMD_DEFAULT_TOC_DEPTH)
|
||||
}
|
||||
|
|
|
@ -41,7 +41,8 @@ exports.getConfig = (req, res) => {
|
|||
allowedUploadMimeTypes: config.allowedUploadMimeTypes,
|
||||
defaultUseHardbreak: config.defaultUseHardbreak,
|
||||
linkifyHeaderStyle: config.linkifyHeaderStyle,
|
||||
useCDN: config.useCDN
|
||||
useCDN: config.useCDN,
|
||||
defaultTocDepth: config.defaultTocDepth
|
||||
}
|
||||
res.set({
|
||||
'Cache-Control': 'private', // only cache by client
|
||||
|
|
|
@ -263,6 +263,32 @@
|
|||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.ui-toc-dropdown .nav .nav>li>ul>li>ul>li>a {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
padding-left: 50px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ui-toc-dropdown[dir='rtl'] .nav .nav>li>ul>li>ul>li>a {
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.ui-toc-dropdown .nav .nav>li>ul>li>ul>li>ul>li>a {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
padding-left: 60px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ui-toc-dropdown[dir='rtl'] .nav .nav>li>ul>li>ul>li>ul>li>a {
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ui-toc-dropdown .nav .nav>li>a:focus,.ui-toc-dropdown .nav .nav>li>a:hover {
|
||||
padding-left: 29px;
|
||||
}
|
||||
|
@ -279,6 +305,22 @@
|
|||
padding-right: 39px;
|
||||
}
|
||||
|
||||
.ui-toc-dropdown .nav .nav>li>ul>li>ul>li>a:focus,.ui-toc-dropdown .nav .nav>li>ul>li>ul>li>a:hover {
|
||||
padding-left: 49px;
|
||||
}
|
||||
|
||||
.ui-toc-dropdown[dir='rtl'] .nav .nav>li>ul>li>ul>li>a:focus,.ui-toc-dropdown[dir='rtl'] .nav .nav>li>ul>li>ul>li>a:hover {
|
||||
padding-right: 49px;
|
||||
}
|
||||
|
||||
.ui-toc-dropdown .nav .nav>li>ul>li>ul>li>ul>li>a:focus,.ui-toc-dropdown .nav .nav>li>ul>li>ul>li>ul>li>a:hover {
|
||||
padding-left: 59px;
|
||||
}
|
||||
|
||||
.ui-toc-dropdown[dir='rtl'] .nav .nav>li>ul>li>ul>li>ul>li>a:focus,.ui-toc-dropdown[dir='rtl'] .nav .nav>li>ul>li>ul>li>ul>li>a:hover {
|
||||
padding-right: 59px;
|
||||
}
|
||||
|
||||
.ui-toc-dropdown .nav .nav>.active:focus>a,.ui-toc-dropdown .nav .nav>.active:hover>a,.ui-toc-dropdown .nav .nav>.active>a {
|
||||
padding-left: 28px;
|
||||
font-weight: 500;
|
||||
|
@ -297,6 +339,24 @@
|
|||
padding-right: 38px;
|
||||
}
|
||||
|
||||
.ui-toc-dropdown .nav .nav>.active>.nav>.active>.nav>.active:focus>a,.ui-toc-dropdown .nav .nav>.active>.nav>.active>.nav>.active:hover>a,.ui-toc-dropdown .nav .nav>.active>.nav>.active>.nav>.active>a {
|
||||
padding-left: 48px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ui-toc-dropdown[dir='rtl'] .nav .nav>.active>.nav>.active>.nav>.active:focus>a,.ui-toc-dropdown[dir='rtl'] .nav .nav>.active>.nav>.active>.nav>.active:hover>a,.ui-toc-dropdown[dir='rtl'] .nav .nav>.active>.active>.nav>.nav>.active>a {
|
||||
padding-right: 48px;
|
||||
}
|
||||
|
||||
.ui-toc-dropdown .nav .nav>.active>.nav>.active>.nav>.active>.nav>.active:focus>a,.ui-toc-dropdown .nav .nav>.active>.nav>.active>.nav>.active>.nav>.active:hover>a,.ui-toc-dropdown .nav .nav>.active>.nav>.active>.nav>.active>.nav>.active>a {
|
||||
padding-left: 58px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ui-toc-dropdown[dir='rtl'] .nav .nav>.active>.nav>.active>.nav>.active>.nav>.active:focus>a,.ui-toc-dropdown[dir='rtl'] .nav .nav>.active>.nav>.active>.nav>.active>.nav>.active:hover>a,.ui-toc-dropdown[dir='rtl'] .nav .nav>.active>.active>.nav>.nav>.active>.nav>.active>a {
|
||||
padding-right: 58px;
|
||||
}
|
||||
|
||||
/* support japanese font */
|
||||
.markdown-body[lang^="ja"] {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Meiryo, "メイリオ", "MS Gothic", "MS ゴシック", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
|
|
@ -82,7 +82,8 @@ View
|
|||
## Table of Contents:
|
||||
You can look at the bottom right section of the view area, there is a _ToC_ button <i class="fa fa-bars"></i>.
|
||||
Pressing that button will show you a current _Table of Contents_, and will highlight which section you're at.
|
||||
ToCs support up to **three header levels**.
|
||||
ToCs support up to **five header levels**, the **default** is **set to three**. The maxLevel can be set for each note by using
|
||||
[YAML Metadata](./yaml-metadata)
|
||||
|
||||
## Permalink
|
||||
Every header will automatically add a permalink on the right side.
|
||||
|
@ -133,12 +134,19 @@ You can provide advanced note information to set the browser behavior (visit abo
|
|||
- GA: set to use Google Analytics
|
||||
- disqus: set to use Disqus
|
||||
- slideOptions: setup slide mode options
|
||||
- toc: set options of the Table of Contents.
|
||||
|
||||
## ToC:
|
||||
Use the syntax `[TOC]` to embed table of content into your note.
|
||||
Use the syntax `[TOC]` to embed table of content into your note. By default, three header levels are displayed. This can also be specified by using [YAML Metadata](./yaml-metadata).
|
||||
|
||||
[TOC]
|
||||
|
||||
You can also specify the number of header levels by specifying the `maxLevel` like this: `[TOC maxLevel=1]`
|
||||
|
||||
[TOC maxLevel=1]
|
||||
|
||||
|
||||
|
||||
## Emoji
|
||||
You can type any emoji like this :smile: :smiley: :cry: :wink:
|
||||
> See full emoji list [here](http://www.emoji-cheat-sheet.com/).
|
||||
|
|
|
@ -139,6 +139,22 @@ This option allows you to enable Disqus with your shortname.
|
|||
disqus: codimd
|
||||
```
|
||||
|
||||
toc
|
||||
---
|
||||
|
||||
This option allows you to set options regarding the table of contents (toc). Currently, its only option is to set the maxDepth.
|
||||
|
||||
**Notice: always use two spaces as indention in YAML metadata!**
|
||||
|
||||
|
||||
> **maxDepth:**
|
||||
> default: not set (whioch will show everything until level 3 (h1 -- h3))
|
||||
> max: 5 (as defined by md-toc.js)
|
||||
|
||||
|
||||
**Example**
|
||||
|
||||
|
||||
type
|
||||
---
|
||||
This option allows you to switch the document view to the slide preview, to simplify live editing of presentations.
|
||||
|
|
|
@ -877,8 +877,12 @@ export function generateToc (id) {
|
|||
const target = $(`#${id}`)
|
||||
target.html('')
|
||||
/* eslint-disable no-unused-vars */
|
||||
|
||||
var tocOptions = md.meta.toc || {}
|
||||
var maxLevel = (typeof tocOptions.maxLevel === 'number' && tocOptions.maxLevel > 0) ? tocOptions.maxLevel : window.defaultTocDepth
|
||||
|
||||
var toc = new window.Toc('doc', {
|
||||
level: 3,
|
||||
level: maxLevel,
|
||||
top: -1,
|
||||
class: 'toc',
|
||||
ulClass: 'nav',
|
||||
|
@ -1076,11 +1080,20 @@ export function renderTOC (view) {
|
|||
const target = $(`#${id}`)
|
||||
target.html('')
|
||||
/* eslint-disable no-unused-vars */
|
||||
|
||||
const specificDepth = parseInt(toc.data('toc-depth'))
|
||||
|
||||
var tocOptions = md.meta.toc || {}
|
||||
var yamlMaxDepth = (typeof tocOptions.maxLevel === 'number' && tocOptions.maxLevel > 0) ? tocOptions.maxLevel : window.defaultTocDepth
|
||||
|
||||
var maxLevel = specificDepth || yamlMaxDepth
|
||||
|
||||
const TOC = new window.Toc('doc', {
|
||||
level: 3,
|
||||
level: maxLevel,
|
||||
top: -1,
|
||||
class: 'toc',
|
||||
targetId: id,
|
||||
data: { tocDepth: specificDepth },
|
||||
process: getHeaderContent
|
||||
})
|
||||
/* eslint-enable no-unused-vars */
|
||||
|
@ -1335,9 +1348,12 @@ const gistPlugin = new Plugin(
|
|||
// TOC
|
||||
const tocPlugin = new Plugin(
|
||||
// regexp to match
|
||||
/^\[TOC\]$/i,
|
||||
/^\[TOC(|\s*maxLevel=\d+?)\]$/i,
|
||||
|
||||
(match, utils) => '<div class="toc"></div>'
|
||||
(match, utils) => {
|
||||
const tocDepth = match[1].split(/[?&=]+/)[1]
|
||||
return `<div class="toc" data-toc-depth="${tocDepth}"></div>`
|
||||
}
|
||||
)
|
||||
// slideshare
|
||||
const slidesharePlugin = new Plugin(
|
||||
|
|
|
@ -13,3 +13,5 @@ window.linkifyHeaderStyle = '<%- linkifyHeaderStyle %>'
|
|||
window.DROPBOX_APP_KEY = '<%- DROPBOX_APP_KEY %>'
|
||||
|
||||
window.USE_CDN = <%- useCDN %>
|
||||
|
||||
window.defaultTocDepth = <%- defaultTocDepth %>
|
||||
|
|
|
@ -2,6 +2,8 @@
|
|||
/**
|
||||
* md-toc.js v1.0.2
|
||||
* https://github.com/yijian166/md-toc.js
|
||||
*
|
||||
* Adapted to accept data attributes
|
||||
*/
|
||||
|
||||
(function (window) {
|
||||
|
@ -15,6 +17,7 @@
|
|||
this.tocTop = parseInt(options.top) || 0
|
||||
this.elChilds = this.el.children
|
||||
this.process = options['process']
|
||||
this.data = options.data || {}
|
||||
if (!this.elChilds.length) return
|
||||
this._init()
|
||||
}
|
||||
|
@ -123,6 +126,9 @@
|
|||
this.toc = document.createElement('div')
|
||||
this.toc.innerHTML = this.tocContent
|
||||
this.toc.setAttribute('class', this.tocClass)
|
||||
if (this.data.tocDepth) {
|
||||
this.toc.dataset.tocDepth = this.data.tocDepth
|
||||
}
|
||||
if (!this.options.targetId) {
|
||||
this.el.appendChild(this.toc)
|
||||
} else {
|
||||
|
|
Loading…
Reference in New Issue