case 'github-toc':
          this.mdc.use(markdownItGithubToc, {
            tocFirstLevel: 1,
            tocLastLevel: 3,
            tocClassName: 'toc',
            anchorLinkSymbol: '',
            anchorLinkSpace: false,
            anchorClassName: 'anchor',
            anchorLinkSymbolClassName: 'octicon octicon-link'
          })
          break

允许\n换行

参数说明
https://github.com/markdown-it/markdown-it#api

修改node_modules\markdown-core\src\index-node.js, 加上breaks参数

const options = { html: true, linkify: true, breaks:true }

默认为预览状态

文档最终是发给别人看的, 希望默认状态下开闭编辑状态, 只预览

const getPreviewWidth = () => {
  let previewWidth = Cookies.get('editor-versus-preview')
  if (previewWidth === undefined) {
    previewWidth = '100%'
  }
  return previewWidth
}

文本改成左端对齐

修改dist\index.html

    <style>
      .markdown-body p {
        text-align: left !important;
      }
    </style>

TOC放在侧边上

修改dist\index.html. 本例放在了右边 (如果放在左边, 不太好处理整体的布局)

    <style>
      .toc {
        position: fixed !important;
        right: 20px !important;
        top: 5% !important;
        width: 250px !important;
        overflow: auto !important;
        height: 90% !important;
      }
      .markdown-body{
        padding-right: 250px !important;
      }
    </style>

监听ctrl+s

 $(document).keydown(function(e){
    // ctrl + s
    if( e.ctrlKey  == true && e.keyCode == 83 ){
		//你自己的保存操作
		return false;
    }
  });

升级Latex

此开源使用的katex库太旧，不支持新的语法，需要升级. 方法如下

在index.html中加上

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.css" integrity="sha384-xNwWFq3SIvM4dq/1RUyWumk8nj/0KFg4TOnNcfzUU4X2gNn3WoRML69gO7waf3xh" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.js" integrity="sha384-UP7zD+aGyuDvxWQEDSRYcvoTxJSD82C6VvuEBktJZGo25CVhDstY9sCDHvyceo9L" crossorigin="anonymous"></script>

修改node_modules\markdown-it-latex\src\index.js
注释掉katex, 不使用webpack管理

//import './katex.css'
import asciimath2latex from 'asciimath-to-latex'
//import katex from 'katex'

3.修改node_modules\markdown-core\src\index-browser.js
注释掉这一行

//import 'markdown-it-latex/dist/index.css'

临时保存

编辑一段文档之后, 希望能够暂存, 避免意外, 可以使用localStorage

		let md = editor.getValue();
 		localStorage.setItem(location.pathname, md);

保存为文件

在index.html的菜单栏上加上新菜单

    <span id="save_file" style="cursor: pointer">保存文件</span>

本人将md数据和html代码合并在一个文件中了. md数据放在<xmp></xmp>标签下.

当html的所有文档加载完成之后, js会修改dom, 因此在修改之前, 需要先读取html源码,
使用上一步中的html, 再追加上md数据, 生成一个新的html,
利用blob将包含md的html保存为文件

  $('#save_file').click(() => {
    let md = editor.getValue();
    let html = '\ufeff<!DOCTYPE html><html><head>' + htmlHead + '</head><body>' +
      '<xmp id=\'saved\' style=\'visibility: hidden\'>' + md + '</xmp>' +
      htmlBody + includeJS + '</body></html>'
    let blob = new Blob([html], {type: 'text/plain;charset=UTF-8'});
    saveAs(blob, fileName);
    localStorage.removeItem(location.pathname);
  });

JS CDN

将index.html中的index.bundle.js改成github上的路径, 需要利用jsdelivr的CDN服务.
例如
https://cdn.jsdelivr.net/gh/wzjwhut/markdown-editor@05ce3fe85e2fe3dbfcb73b6febba4d9134a2a7db/dist/index.bundle.js

制作一款与CSDN的markdown相似的离线编辑器

文章目录

思路

下载开源markdown-plus

定制

TOC从1级标题开始生成