在 Blogger 中使用 Markdown

最近有陆陆续续开始写一些东西，不过 Google Blogger 编辑体验非常非常糟糕。只好求助 Google 一下有没有能够使用 Markdown 编辑的方法，果然有人分享了如何在 Blogger 里使用 Markdown。思路其实很简单，借助于 showdown，动态地将 Mardown 内容转换为用于显示的 HTML。

之前把旧的博客里面的 Markdown 写的博文导入到 Blogger 时费了一番功夫，花了很多时间将 Markdown 转换为 HTML。其实都可以借助现有的工具在 Markdown 和 HTML 之间互相转换：例如 showdown 以及 turndown。

下面的代码是我基于别人博文，自己进行了一些改动，在 Blogger 的布局里添加一个 HTML/Javascript 的组件即可。在编辑 Markdown 博文时，需要切换到 HTML 模式，并且开头以 markdown 起头即可。

 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
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>

<script>

var showdownOption = {
  'simplifiedAutoLink': true,
  'strikethrough': true,
  'tables': true,
  'tasklists': true
}

var converter = new showdown.Converter(showdownOption);

var posts = document.querySelectorAll(".post-body");

Array.prototype.forEach.call(posts, function (el, i) {
  var idx = el.innerHTML.indexOf("markdown");
  if (idx != -1 && idx <= 1) {
    let md = el.innerHTML
      .replace(/\n&amp;gt;/g, '\n>')  // fix quotes
      .replace("markdown", "");   // remove flag

    el.innerHTML = converter.makeHtml(md)
      .replace(/&amp;amp;/g, "&amp;"); // remove redundant escape
  }
});

</script>

注意在使用的时候，所有 HTML 的内置标签的尖括号需要 escape 一下，比如 <> 分别需要用 lt 和 gt 来替代。上面的代码有个小问题，就是 showdown 会在 convert 的时候，将代码块中的 & 符号全部都 escape 了，这样一来网页中代码里的尖括号全部都无法显示。所以在代码的最后我将 escape 之后的 amp 又替换回原本的 & 符号了。这样一来唯一的缺点就是没法在 HTML 里显示，这就得等将来有时间再解决了。

如果尖括号不 escape 的话，像下面的 JS 代码会被执行:

1
<script>console.log("hello");</script>

可以借助在线的工具 HTML Escape 来自动进行转换。对于其它语言的代码，基本就不需要操心了。

除此之外，我还用 PrismJS 替换了原来使用的 highlightjs 来进行代码的高亮显示。我个人比较喜欢暗色的 tomorrow 主题，只需要加载 Prism 的 core js 文件以及使用 autoloader 自动加载对应代码区域指定语言的高亮方式。

1
2
3
<link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.css" rel="stylesheet"></link>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>

此外，还需要给滚动条加一下样式，否则在暗色主题下会很丑

 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
.post-body pre[class*="language-"] {
  font-size: 14px;
  line-height: 1.4;
  background-color: #282c34;
  border-radius: 6px;
  overflow: auto;
}

/* Scroll */
pre::-webkit-scrollbar {
  width: 10px;
  height: 5px;
}
pre::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
pre::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

blockquote {
  border-left: 4px solid #dddddd;
  padding: 0 15px;
  color: #777777;
  text-align: left;
  font-size: medium;
  font-style: normal;
  margin: 1rem 0rem;
}

显示效果：

这样就大功告成啦

参考：

在 Blogger 中使用 Markdown

相关文章：