TP Notes: 這個 BLOG 的文章使用的技巧

雖然使用的是 Google 的 Blogger , 但是所有文章都是用 Markdown 寫的，我在 [GitHub Pages](https://yiharng.github.io/)  上寫了個小程式, 可以即時轉換，用來做小型開發測試還不錯用。

markdown 的處理使用的是 [marked.js](https://marked.js.org/) 以及 [highlight.js](https://highlightjs.org/) 來處理程式碼的顏色，另外還寫了一支 [mm.js][]，只要在 textarea 加上 **class="markdown_mm"** 再引用 [mm.js][] 就會自動轉換，另外還可以加上 **zoom="true"** ，就會出現改變字型大小的按鈕 
  
  [mm.js]:https://yiharng.github.io/mm.htm

為了讓程式看起來更簡潔，mm.js 裡頭把 jquery 包了進來，文章中的所有範例都是預設使用 jquery，如果要執行文章中的範例程式，請在程式中引用 jquery 或 mm.js ， 另外所有範例都會去掉HTML檔頭包括 ```<html> <head> <body> ``` 這些宣告，只要將範例程式放在 body 中即可。  
  
以這篇文章為例，在 Blogger 看 HTML 原始碼長這樣
 
```
$textarea class="markdown_mm" zoom="true">

文章放這裡
  
$/textarea>
<script src="https://yiharng.github.io/mm.js"></script>
  
```
  其中比較需要處理的，大概是文章中不能使用 textarea ，如果需要的話，可以用 <span>$</span>textarea> ,和 <span>$</span>/textarea> 取代
    
# mm.js 的其它應用

在 div 中加上 class="mmresult" 會出現 "執行結果" 的框框, 還可以加上另一個 class 的 **[名稱]**，然後在程式碼區加上 $<span>mm</span>code(**[名稱]**) 用來取程式碼，這樣子文件就不需要程式碼一份，執行結果又一份

範例 :

$<span>mm</span>code(r1)

``<span>`</span>
</div>

```
<div class="mmresult r1">
  <font color="#0000ff">結果秀在這</font>
</div>
```  
</div>

$<span>mm</span>code(r1) 會被 `<font color="#0000ff">結果秀在這</font>` 取代
  
```
$mmcode(r1)
```
<div class="mmresult r1">
  <font color="#0000ff">結果秀在這</font>
</div>

TP Notes

2020年5月28日星期四

這個 BLOG 的文章使用的技巧

沒有留言:

張貼留言

2020年5月28日 星期四

這個 BLOG 的文章使用的技巧

沒有留言:

張貼留言

2020年5月28日星期四