在 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;
}

显示效果:

这样就大功告成啦

参考: