Blogger使用上的技巧整理

使用StackEdit搭配highlight.js配置Blogger顯示

使用StackEdit用markdown寫文章, 搭配highlight.js對code block做高亮顯示.

StackEdit

1. 連結Blogger帳號
2. 寫完後直接publish
3. PageId可不填

如何取得PageId?
在blogger管理頁面, 打開這篇文章, url=https://www.blogger.com/blog/post/edit/1111111111/22222222, 第1個參數是blogId(1111111111)最後一個參數是PageId(22222222)

highlight.js

1. 直接在網頁上的Demo挑選喜愛的顏色.
2. 在Blogger的主題/自訂/編輯HTML的<head></head>中加入即可:

<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/base16/bright.min.css' integrity='sha512-lo/WxEAEu2DlBAe1TUXoq4at3+QFUbqebT5UyFl009q4Rs2PZgbAyzQ/pxCFbbrXvgQeYtzcv4VoTglsy5JbCQ==' referrerpolicy='no-referrer' rel='stylesheet'/>
<script crossorigin='anonymous' integrity='sha512-D9gUyxqja7hBtkWpPWGt9wfbfaMGVt9gnyCvYa+jojwwPHLCzUm5i8rpk7vD7wNee9bA35eYIjobYPaQuKS1MQ==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'/>
<script>hljs.highlightAll();</script>

Google drive圖片引入文章的方法

這是取得共享的連結

https://drive.google.com/file/d/1-5X8zIR6jp84qZfCd4y_6B55axJfvTHZ/view?usp=drive_link

取出id並引入markdown的image語法

![TypeScript圖標](https://drive.google.com/uc?id=1-5X8zIR6jp84qZfCd4y_6B55axJfvTHZ =100x100)

實際輸出

HTML語法

<img src="https://drive.google.com/uc?id=1-5X8zIR6jp84qZfCd4y_6B55axJfvTHZ" alt="image" width="50%" height="auto">

<img src="https://drive.google.com/uc?id=1-5X8zIR6jp84qZfCd4y_6B55axJfvTHZ" alt="image" width="120" height="auto">

實際輸出

預設的顯示寬度太窄, 要怎麼變寬?

在網路上找到這一篇Blogger 彈性版面，隨著視窗大小調整寬度, 我按照裡面的方式變更後, 整個版面就變的比較好看了.

SyntaxHighlight在Blogger的使用方式

在Blogger中要顯示程式碼, 使用了SyntaxHighlight插件來處理. 因此需要在設定中插入一些JS程式以便能夠正確的運作.

Goolge部落格–Blogger與Windows Live Writer

 Blogger的線上編輯器在某些場合與狀況不是非常好用, 而在windows環境有一套微軟提供的免費離線編輯器Windows Live Writer很多人用, 所以作了一些筆記以便日後使用使可以參考。

在Blogger中顯示程式碼區塊

Blogger預設並沒有提供code block的功能，所以只要在文章中有程式碼就無法顯示的很漂亮。 因此找了一些文章並參考其作法，將code block用比較美觀的方式呈現。