純文字格式編寫文件(Markdown)

Written by Christine

編輯HTML模式時, HTML語法和文章本身交錯, 編輯時很難看懂

但因要排版code block, 又必須使用

後來找到markdown, 可解決這個問題

設定script

<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=sons-of-obsidian"></script>
  

Markdown語法

使用HTML編輯, 第一行需標示markdown

• 標題: # 標題
• 換行: 兩個空白
• 文字段落: 一行空白
• 引用: > 這是一段引用文字
• 清單: +, -後面一個空白, 下一層的話, 前面空兩格
• 區塊程式碼: ```, 兩組反引號中間夾起來的部分, 會被標示為code block
• 斜體: 文字前後加上*
• 粗體: 文字前後加上**
• 連結: [顯示文字](路徑)
• 圖片: 

設定CSS

程式太長不會自動換行, 自己換行的話, 在手機上看, 又超出去了, 故需要加入css

• 開啟 blogger 後台，點選左邊選單的 主題
• 點選自訂->進階
• 點選網頁文字, 拉到最後一個 新增css
  

pre {
      white-space: pre-wrap;  /* 自動換行 */    
}

範例

markdown
# 程式：
```
i=0 
j=0 
print('輸入i的值') 
i=input() 
print('輸入j的值') 
j=input() 
print(i+j)    #問題處
```

Reference:

•  米米卡的記憶體
• 卡斯柏