107.06.05 在Blogger文章加入程式碼 (三)

此篇是 105.07.16 在Blogger文章加入程式碼 (一) 以下稱為 (一) 的加強版

• 加入非預設的語言
• 使用 querySelectorAll() 簡化 codeblock 的 class name

加入非預設的語言

首先在 (一) 中我們用的是 google 提供的程式高亮 google/code-prettify
裡面有提到部分語言是預設，有些非預設的就需要安裝外掛
以下以 rust 為例
不使用外掛時某些部分會填色錯誤，例如 lifetime 會被認為是字串(單引號間為綠色)
但實際上單引號是一個為一單位

解決

打開"版面配置"，點擊上次使用的 HTML/JavaScript 小工具的"編輯"

加入下面程式後儲存
因為是以 rust 為例，所以裝 lang-rust.js，其他語言支援可以去 code-prettify/loader 查找

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/lang-rust.js"></script>

這樣就大致完成了
使用時可以使用

<pre class="codeblock prettyprint language-rust">
/* rust code */
</pre>

剛剛單引號問題解決後如下

使用 querySelectorAll() 簡化 codeblock 的 class name

不過不覺得 "codeblock prettyprint language-rust" 超長嗎? 每個區塊都要打
我去找了 HTML(CSS) 有沒有 class 的繼承 (被揍)，結果沒有 QuQ
class 裡面呼叫其他 class 也不行
有發現 Selector 這東東，不過還是繼續找有沒有可以只用 class 就解決
還想過 class=變數，然後變數再從其他地方給全域字串變數，都不行 OAO

解決

就只好去找 Selector 怎麼用了
一樣打開"版面配置"，新增小工具，選擇"HTML/JavaScript 小工具"

在文字塊輸入下方程式並儲存

<style>
.post .cr {};
</style>
<script>
var codes = document.querySelectorAll('.cr');
[].forEach.call(codes, function(code) {
  code.className = 'codeblock prettyprint lang-rust';
});
</script>

這樣原本要打 class="codeblock prettyprint language-rust"，之後只要打 class="cr"
它就會自動幫你轉 class 的名字

乾脆每個都來改，我是大懶人 OuO
完整版：

<style>
.post .cr { /* rust code */ };
.post .cb { /* common code*/ };
.post .ct { /*text block*/ };
</style>
<script>
var codes = document.querySelectorAll('.cr');
[].forEach.call(codes, function(code) {
  code.className = 'codeblock prettyprint lang-rust';
});
var codes = document.querySelectorAll('.cb');
[].forEach.call(codes, function(code) {
  code.className = 'codeblock prettyprint';
});
var codes = document.querySelectorAll('.ct');
[].forEach.call(codes, function(code) {
  code.className = 'codeblock';
});
</script>

手機版若顯示不出來請參考 106.04.05 Blogger 手機版程式碼區塊

參考資料：
Dynamically change class names in JavaScript
Using innerHTML with querySelectorAll