markdown-it-footnote 技术文档

markdown-it-footnote 技术文档

安装指南

使用 npm 安装

npm install markdown-it-footnote --save

使用 bower 安装

bower install markdown-it-footnote --save

项目使用说明

markdown-it-footnote 是一个用于 markdown-it 的插件，支持在 Markdown 文档中添加脚注。该插件基于 pandoc 的脚注定义。

基本使用

1. 普通脚注：

   Here is a footnote reference,[^1] and another.[^longnote]
   
   [^1]: Here is the footnote.
   
   [^longnote]: Here's one with multiple blocks.
   
       Subsequent paragraphs are indented to show that they
   belong to the previous footnote.
   

2. 内联脚注：

   Here is an inline note.^[Inlines notes are easier to write, since
   you don't have to pick an identifier and move down to type the
   note.]
   

渲染示例

var md = require('markdown-it')()
            .use(require('markdown-it-footnote'));

md.render('Here is a footnote reference,[^1] and another.[^longnote]\n\n[^1]: Here is the footnote.\n\n[^longnote]: Here\'s one with multiple blocks.\n\n    Subsequent paragraphs are indented to show that they belong to the previous footnote.');

项目API使用文档

自定义输出

如果你想要自定义脚注的输出格式，可以通过替换模板函数来实现。以下是一些示例：

替换 <hr> 标签

const md = require('markdown-it')().use(require('markdown-it-footnote'));

md.renderer.rules.footnote_block_open = () => (
  '<h4 class="mt-3">Footnotes</h4>\n' +
  '<section class="footnotes">\n' +
  '<ol class="footnotes-list">\n'
);

自定义 epub 脚注

const backrefLabel = 'back to text';

const epubRules = {
  footnote_ref: ['<a', '<a epub:type="noteref"'],
  footnote_open: ['<li', '<li epub:type="footnote"'],
  footnote_anchor: ['<a', `<a aria-label="${backrefLabel}"`],
}

Object.keys(epubRules).map(rule => {
  let defaultRender = md.renderer.rules[rule];
  md.renderer.rules[rule] = (tokens, idx, options, env, self) => {
    return defaultRender(tokens, idx, options, env, self).replace(...epubRules[rule]);
  }
})

项目安装方式

通过 npm 安装

npm install markdown-it-footnote --save

通过 bower 安装

bower install markdown-it-footnote --save

通过以上步骤，你可以轻松地将 markdown-it-footnote 插件集成到你的项目中，并根据需要进行自定义配置。