使用StackEdit搭配highlight.js配置Blogger顯示
使用StackEdit用markdown寫文章, 搭配highlight.js對code block做高亮顯示.
StackEdit
- 連結Blogger帳號
- 寫完後直接publish
- PageId可不填
如何取得PageId?
在blogger管理頁面, 打開這篇文章, url=https://www.blogger.com/blog/post/edit/1111111111/22222222, 第1個參數是blogId(1111111111)最後一個參數是PageId(22222222)
highlight.js
- 直接在網頁上的
Demo挑選喜愛的顏色. - 在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語法
實際輸出
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 彈性版面，隨著視窗大小調整寬度, 我按照裡面的方式變更後, 整個版面就變的比較好看了.
沒有留言:
張貼留言