2017/3/8

在 blogger 貼漂亮 code 的方法(使用 markdown 和 prettyprint)

使用套件

markdown
prettyprint

安裝步驟

先到 blogger 版面配置,在最下方找到新增小工具

然後選擇HTML/JavaScript

然後在內容填入以下程式碼
<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>


就完工了。

測試

接著發佈一篇使用markdown語法的新文章
文章內容寫入如下圖:

結果看起來會是

補充

使用Tranquil Heart theme 的 code 寫法為:

<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");
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"></script>

<link rel="stylesheet" type="text/css" href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/tranquil-heart.min.css" />

可以成功,但一行程式碼太長時會破版,應該是這個theme的問題。

27 則留言:

zhan的国 提到...

你好,照着你的方法试了好像没有成功。

卡卡米 提到...

你好 我這方法適用於基本款的 blog 版面 如果你是用動態版的或者其他款式的話需要作些修改

nash 提到...

請問可以教一下要怎麼修改嗎?

想要用內建Contempo就好

卡卡米 提到...

nash你好 我已修改程式碼,目前程式碼可以支援Contempo

nash 提到...

不好意思我測試還是沒有呢
是要在html下用md撰寫對吧?

卡卡米 提到...

對的 而且要在文章的第一行寫 markdown
程式才會判斷這篇文章要使用markdown

nash 提到...

成功了!
謝謝!

回饋一下
還要把【顯示「 HTML/JavaScript 」】勾選才行

新版本blooger的功能

卡卡米 提到...

感謝回饋~

nash 提到...

請問程式碼這一段
有辦法換主題嗎?
想要有行數&背景不要那麼深黑@@
有辦法引這邊的主題嗎?
https://jmblog.github.io/color-themes-for-google-code-prettify/
(私心想要Tranquil Heart)

卡卡米 提到...

修改方法已回覆在文尾

mapgallery 提到...

好東西!感謝!

Jo 提到...

你好
如果markdown內容寫了有 > 或 < 的符號時,會被轉換成 > 和 <
例如
yum list | grep php > /dev/null 2>&1
變成
yum list | grep php > /dev/null 2 > &1

請問這有辦法解嗎?

Jo 提到...

不好意思,我微調您的文章的程式後解決了 :)

卡卡米 提到...

Jo 您好
您是說會被轉換成 左右兩邊多一個空白 是嗎?

Jo 提到...

您好,抱歉,我沒有留意到我的留言也被轉換成 html 標記語言了....
我遇到的問題是指 "<" 會被轉換成 "& g t ;"
">" 會被轉換成 "& l t ;"


沒把握留言是否又會很 sweet 的轉換,請您看以下網址的第一段說明
http://www.pt.ntu.edu.tw/hmchai/PTcomputer/hHTML/HTMLcontent/HTMLsymbol.htm


我修改前有逐步debug看看,我認為是在 e.innerHTML 的內容就被轉換了,與您所提供的程式沒有直接的關係
所以我的處理方式是就您的程式再加上一段 replace 的語法,將被轉換的特殊字元再改回來
用文字要描述做了什麼修改有點困難~"~
目前調整後的程式僅用於自己的 blog,如您允許我用您的程式修改並且放到 github,我再將 source code 的連結給您

卡卡米 提到...

http://markdown.tw/#autoescape

看起來這個轉換是 markdown 本身的設計

如果你想要把code放到github 請附上本篇連結 然後在這裡留github 連結 謝謝

Jo 提到...

您好
markdown 本身的轉換是沒有問題的,這會使得在網頁上可以正常呈現
我所遇到的問題是在進行 markdown 的轉換前就已經被轉換過一次了
找到了個方法可以和您溝通 code

文章中所提供的程式如下,我描述了問題發生點
https://jsfiddle.net/anmtoz8p/1/

以下是我調整的部分
https://jsfiddle.net/7db6wpeo/1/


卡卡米 提到...

hi Jo
我試了一下發現可能是在編輯文章的時候選擇的模式不同
http://imgur.com/a/k1Fk7

有沒有可能是這個問題呢?

Jo 提到...

哈囉~ 我建了一個新的部落格,並且使用您文章提供的程式
測試 po 了一篇文,編輯文章時是在 html 模式下編的
https://ppt.cc/fh6dOx

結果如下
https://jodotlearn.blogspot.tw/2017/08/blog-post_21.html


我有看到您部落格的測試發文,看起來是很正常的
這中間不曉得還有什麼落差 ><

卡卡米 提到...

我先前的測試發文沒有寫``` 所以沒有第二次轉換XD

我寫了一篇文解釋這個現象,並且將您提供的解法摘錄到本文中

http://etrex.blogspot.tw/2017/08/convertermakehtmlnyum-list-grep-php.html

Jo 提到...

謝謝 :)
很高興有這篇文章提供的方法可以在blogger寫markdown
這讓我有點動力重回 blogger 寫文XD

卡卡米 提到...

感謝您喜歡這篇文章

J 提到...

謝謝,用了這個真的會比較想回來寫blogger,用原本的editor比起用markdown速度還是有些差異,我自己覺得markdown方便多了 :)
謝謝你的分享,清晰又俐落的教學!

Jason Cheng 提到...

感謝,這篇真的太實用了

Yubao 提到...

你好,跟Latex Math(Mathjx)语法一起使用时会有问题。例如: $a_a b_b c_c$ . 或者 $$a_a b_b c_c$$
时会显示错误。

Yubao 提到...

Thanks,
How to show TOC? I found "showdown-toc" plugin can implement it.
But I do not know how to config this pulgin.
I tried some ways, but failed.
It cannot work if I pass "showdown-toc" extension to "convert".

Thanks.

卡卡米 提到...

showdown-toc 的用法在 https://www.npmjs.com/package/showdown-toc 有提到,應該是改這兩行:

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
<script>
var converter = new showdown.Converter();

改為

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
<script src="//unpkg.com/showdown-toc/dist/index.umd.min.js"></script>
<script>
const toc = [];
const converter = new showdown.Converter({ extensions: [showdownToc({ toc })] });


我沒試過 但應該是這樣