在 Blogger 中使用 Markdown

markdown 最近有陆陆续续开始写一些东西,不过 Google Blogger 编辑体验非常非常糟糕。 只好求助 Google 一下有没有能够使用 Markdown 编辑的方法,果然有人分享了如何在 Blogger 里使用 Markdown。 思路其实很简单,借助于 [showdown](http://showdownjs.com/),动态地将 Mardown 内容转换为用于显示的 HTML。 之前把旧的博客里面的 Markdown 写的博文导入到 Blogger 时费了一番功夫,花了很多时间将 Markdown 转换为 HTML。其实都可以借助现有的工具在 Markdown 和 HTML 之间互相转换:例如 showdown 以及 [turndown](https://domchristie.github.io/turndown/)。 下面的代码是我基于别人博文,自己进行了一些改动,在 Blogger 的布局里添加一个 HTML/Javascript 的组件即可。 在编辑 Markdown 博文时,需要切换到 HTML 模式,并且开头以 `markdown` 起头即可。 ```js <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&gt;/g, '\n>') // fix quotes .replace("markdown", ""); // remove flag el.innerHTML = converter.makeHtml(md) .replace(/&amp;/g, "&"); // remove redundant escape } }); </script> ``` 注意在使用的时候,所有 HTML 的内置标签的尖括号需要 escape 一下,比如 <> 分别需要用 lt 和 gt 来替代。 上面的代码有个小问题,就是 showdown 会在 convert 的时候,将代码块中的 & 符号全部都 escape 了,这样一来网页中代码里的尖括号全部都无法显示。所以在代码的最后我将 escape 之后的 amp 又替换回原本的 & 符号了。这样一来唯一的缺点就是没法在 HTML 里显示,这就得等将来有时间再解决了。 如果尖括号不 escape 的话,像下面的 JS 代码会被执行: ```js ``` 可以借助在线的工具 [HTML Escape](https://www.freeformatter.com/html-escape.html) 来自动进行转换。 对于其它语言的代码,基本就不需要操心了。 除此之外,我还用 [PrismJS](https://prismjs.com/) 替换了原来使用的 highlightjs 来进行代码的高亮显示。 我个人比较喜欢暗色的 tomorrow 主题,只需要加载 Prism 的 core js 文件以及使用 autoloader 自动加载对应代码区域指定语言的高亮方式。 ```html ``` 此外,还需要给滚动条加一下样式,否则在暗色主题下会很丑 ```css .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; } ``` 显示效果:
这样就大功告成啦 参考: - http://lausai360.blogspot.com/2018/11 - https://github.com/cs905s/md-in-blogger - https://codepen.io/zkreations/pen/bZRgqd

Comments