[Markdown] 用 Markdown 寫 Blogger 文章的方法:用 Blogger 內部工具擴充套件 (showdown & code-prettify)

最近看到一篇教學,利用 Blogger 內建的 HTML/JavaScript 擴充工具在網誌裡加入第三方套件,就能用 Markdown 語法來寫 Blogger 的文章,在檢視文章時自動進行轉換 Markdown 和 HTML 的轉換。優點是設定步驟非常簡單,純論呈現效果也很理想。

簡介

這個作法的原理,是透過 Blogger 的小工具,引入外部的 JavaScript 套件 (showdowncode-prettify),對 Markdown 的文章進行視覺轉換。

Blogger 設定步驟

Step 1: 到 Blogger 後台,選「版面配置」,找一個不起眼的區塊 (例如 footer),點「新增小工具」




Step 2: 選擇「HTML/JavaScript」工具



Step 3: 自訂一個標題,然後在內容的區塊內貼上以下程式碼,並按儲存

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
<script>
var converter = new showdown.Converter();
var posts = document.querySelectorAll(".post-body,.snippet-item");
Array.prototype.forEach.call(posts, function(el, i){
  if(el.innerHTML.indexOf("markdown") <= 1){
    el.innerHTML = converter.makeHtml(el.innerHTML.replace("markdown",""));
  }
});

var pres = document.querySelectorAll("pre");
Array.prototype.forEach.call(pres, function(el, i){
  el.classList.add("prettyprint");
});
</script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>



Step 4: 設定完成

這時候到部落格底下看,會看到多出一個小工具的標題,但看不到內容,因為這個小工具只是負責引入套件。

這只是讓你知道這個小工具實際上是存在於你的版面上,以及位置在什麼地方。如果不希望看到一個空的小工具標題礙眼,可以在 Step 3 時的「標題」欄留空,版面上看起來就不會有痕跡。

文章使用示範

Step 1: 新增一篇文章,在「HTML」模式下以 Markdown 語法撰寫文章內容,並在文章開頭多打一行「markdown」,然後發佈。




Step 2: 檢視文章,可以看到 Markdown 語法的內文,已經被轉換成 HTML 形式。

個人使用心得

主要優點:

安裝和引用步驟都很容易
只要在文章開頭加上「markdown」字眼,就能輕易宣告這是一篇需要被轉換的 Markdown 文章。

編輯模式仍維持原本的 Markdown 文字形式
回到文章的 HTML 編輯模式,會看到原文仍是 Markdown 語法,容易編輯修改。
這是我認為一個很重要的特性,因為使用 Markdown 來寫作,就是看上 Markdown 簡潔、易讀易寫的特性,如果原文被加工成 HTML 形式,就失去容易編修的優點。


這是我認為一個很重要的特性,因為使用 Markdown 來寫作,就是看上 Markdown 簡潔、易讀易寫的特性,如果原文被加工成 HTML 形式,就失去容易編修的優點。

但也有個致命缺點:不利 SEO (搜尋引擎優化)

檢視文章的網頁原始碼,會看到文章仍是以 Markdown 原文的形式存在於網頁原始碼內

我們能看到 HTML 形式,是因為套件以動態方式對網頁內容進行轉換。

而這一點就不利於搜尋引擎的爬蟲,因為搜尋引擎解析的是文章標題、連結等 HTML 標籤,如果以 Markdown 原文形式存在,搜尋引擎無法判別哪些是文章標題、哪些是普通內文。

結論:
如果不在意 SEO,可以嘗試此方法;
如果 SEO 對你有影響,那就不適合這個方案。

參考資料

發表留言