好好学习，天天向上！

0%

Markdown编辑器

发表于 分类于 ， ，

前言

假设现在要写一篇markdown格式文章，使用什么编辑器比较好？答：sublime或者typora。

假设现在要把一篇markdown格式文章导出成pdf文档，使用什么编辑器比较好？答：typora。

假设现在要把一篇markdown格式文章发布成微信公众号文章，使用什么编辑器比较好？答：wechat-format。

本文主要介绍三款 markdown 编辑器，分别是 sublime、typora和wechat-format。
此外，还会介绍几个在线markdown编辑器，测试和预览都很方便。

sublime

.md 结尾的文件，在使用 sublime 进行编辑时会自动语法高亮。

之所以推荐sublime，是因为这个编辑器是个万能的编辑器，而且非常轻量。
使用了六年了，依然情有独钟。

typora

简介

typora是近两年崛起的markdown编辑器神器。
传统的markdown编辑器，左边是编辑器，右边是预览。typora另辟蹊径，没有左右分开，而是把编辑和预览结合在一起，随时切换（command+/），更可以在预览时进行编辑。

自定义主题

typora提供各种主题，更是支持用户自定义主题，简单好用。下面我们按照自己的需求来定制主题，熟悉一下自定义主题的流程。

已知需求为：

  • github主题自己很喜欢，但是标题字号太大，想要改小一点。
  • 标题在显示的时候自动编号。

1、Typora，偏好设置，外观，打开主题文件夹

2、备份github.css为github.css.bak

3、编辑github.css，修改字号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
h1 {
    font-size: 1.5em;
    line-height: 1.2;
    border-bottom: 1px solid #eee;
}
h2 {
    font-size: 1.25em;
    line-height: 1.225;
    border-bottom: 1px solid #eee;
}
h3 {
    font-size: 1.15em;
    line-height: 1.43;
}
h4 {
    font-size: 1.05em;
}
h5 {
    font-size: 1em;
}
h6 {
   font-size: 1em;
    color: #777;
}

4、编辑github.css，给标题前添加自动编号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* 标题自动编号 */
body { counter-reset: h1counter; }
h1 { counter-reset: h2counter; }
h2 { counter-reset: h3counter; }
h3 { counter-reset: h4counter; }
h4 { counter-reset: h5counter; }
h5 { counter-reset: h6counter; }
h6 { }
h1:before {
  counter-increment: h1counter;
  content: counter(h1counter) ".\0000a0\0000a0";
}
h2:before {
  counter-increment: h2counter;
  content: counter(h1counter) "."
            counter(h2counter) ".\0000a0\0000a0";
}
h3:before {
  counter-increment: h3counter;
  content: counter(h1counter) "."
            counter(h2counter) "."
            counter(h3counter) ".\0000a0\0000a0";
}
h4:before {
  counter-increment: h4counter;
  content: counter(h1counter) "."
            counter(h2counter) "."
            counter(h3counter) "."
            counter(h4counter) ".\0000a0\0000a0";
}
h5:before {
  counter-increment: h5counter;
  content: counter(h1counter) "."
            counter(h2counter) "."
            counter(h3counter) "."
            counter(h4counter) "."
            counter(h5counter) ".\0000a0\0000a0";
}
h6:before {
  counter-increment: h6counter;
  content: counter(h1counter) "."
            counter(h2counter) "."
            counter(h3counter) "."
            counter(h4counter) "."
            counter(h5counter) "."
            counter(h6counter) ".\0000a0\0000a0";
}

5、重启typora
可见标题字号变小了，同时添加了编号。

但是，如果直接复制粘贴内容到微信公众号，这些标题编号不会被复制。而且，换行效果也没有了。
因此，从typora直接复制粘贴到微信公众号，不是一个好的方案。

导出pdf

文件，导出，PDF。

如上，typora导出的pdf文档，简直完美。

wechat-format

简介

wechat-format最大的优点是：适应微信公众号。比如，微信不支持外链，wechat-format生成的预览会包含 reference。


但是，标题居中效果不是我想要的，标题也没有自动编号，所以也需要自定义一下。

自定义主题

下载wechat-format源码，主要修改：

  • src/assets/scripts/themes/default.js
  • src/assets/scripts/renderers/wx-renderer.js
  • src/assets/css/app.css

修改后的代码参考 wechat-format，最终效果如下

失败的尝试

但是，修改完成之后，复制粘贴到微信公众号，这些标题编号依然不会被复制。
那么，怎样才能复制到这些编号？答：使这些编号变成元素，而不是样式。所以，需要使用js给页面添加编号元素。
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// https://www.cnblogs.com/qiudeqing/p/3229583.html
function number(){
    var headings;
    if (document.querySelectorAll)
        headings = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
    else
        headings = findHeadings(document.body, []);
    function findHeadings(root, sects) {
        for(var c = root.firstChild; c != null; c = c.nextSibling) {
            if (c.nodeType !== 1) continue;
            if (c.tagName.length == 2 && c.tagName.charAt(0) == "H")
                sects.push(c);
            else
                findHeadings(c, sects);
        }
        return sects;
    }
    var sectionNumbers = [0,0,0,0,0,0];
    for(var h = 0; h < headings.length; h++) {
        var heading = headings[h];
        var level = parseInt(heading.tagName.charAt(1));
        if (isNaN(level) || level < 1 || level > 6) continue;
        sectionNumbers[level-1]++;
        for(var i = level; i < 6; i++) sectionNumbers[i] = 0;
        var sectionNumber = sectionNumbers.slice(0,level).join(".") + ". ";
        var span = document.createElement("span");
        span.className = "TOCSectNum";
        span.innerHTML = sectionNumber;
        heading.insertBefore(span, heading.firstChild);
    }
}

但是，想要把这个代码应用到wechat-format，是有难度的，假期搞了一天，最终效果不理想，暂时放弃。
思路：修改 src/assets/scripts/editor.js ，把number函数改写到这个文件里。中间会用到dom转str和str转dom，代码附上。

1
2
3
4
5
6
7
8
9
// https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser
// https://developer.mozilla.org/zh-CN/docs/XMLSerializer
function trans(str){  
    var parser = new DOMParser();
    var doc=parser.parseFromString(str, "text/xml");
    doc = number(doc);
    var s = new XMLSerializer();
    return s.serializeToString(doc);
}

在线markdown编辑器

mdnice

Markdown Nice是一个支持自定义样式的 Markdown 编辑器，支持导出成微信公众号文章和知乎文章。

值得一提的是，mdnice导出的微信公众号文章，排版非常nice，比 wechat-format 还要美观。
尝试了自定义样式，添加了标题编号，同样无法复制到微信公众号。

openwrite

OpenWrite是一个博客群发平台，支持一键发文到微信公众号、知乎、头条、博客园、CSDN等平台。其中一项功能是Markdown格式文章导出微信公众号预览。

Cmd Markdown

Cmd Markdown是一个用了很多年的在线markdown编辑器，稳定靠谱，支持高亮代码块、LaTeX 公式、流程图。

马克飞象

马克飞象是一款专为印象笔记（Evernote）打造的Markdown编辑器，支持高亮代码块、LaTeX 公式、流程图，本地图片以及附件上传。马克飞象同时提供桌面客户端以及离线Chrome App，支持移动端 Web。

StackEdit

StackEdit支持google登录，发布文章到web（github、gitlab、wordpress等），支持高亮代码块、LaTeX 公式、流程图。