提醒

本篇套用的是分享給大家的 JS, 它只摭住廣告, 未加上我自己 PC 版本的版面的本文風格. 所以使用手機觀看會與我其他的貼文風格不同.

由於痞客邦 2020/4/27 開始執行外部 JavaScript 語法規範, 各位請記得重做一次手機號碼認證, 否則 JS 會被擋下來的. 2020/4/27 以後有重做手機號碼認證的可以忽略這條訊息.

提醒_2020/04/27

由於痞客邦 2020/4/27 開始執行外部 JavaScript 語法規範, 各位請記得到 "帳號中心" 重做一次手機號碼認證 (一個手機號碼只能綁定一個登入號號), 否則 JS 會被擋下來的. 2020/4/27 以後有重做手機號碼認證的可以忽略這條訊息.

如何進 "帳號中心" : 帳號中心在頁面最上方的選單行, 你自己的 '大頭照' 圖示的下拉選單中. 進入後在 "帳號資料修改" 頁籤下的 "個人資料設定" 段落中有修改 "手機號碼" 的資料輸入欄, 資料輸入欄的最右方即是 按鈕.

寫在前面

我想先聲明一下: 我不反對廣告. 但是對於 '宿主網站' 我反對版面上到處都是廣告. 我更討厭 '廣告業主' 因為沒有提供足夠流量, 或者圖檔/影音檔太大, 導致 '用戶經驗' 不佳的廣告.

痞客邦部落格程式上色相關文章:

• Part1: SyntaxHighLighter
• Part2: highlight.js
• Part3: Prim.js

痞客邦部落格程式上色相關文章:

• Part1: SyntaxHighLighter
• Part2: highlight.js
• Part3: Prim.js

• highlight.js 的介紹文章貼在後面.
• highlight.js 的插件 CopyButtonPlugin 的介紹文章貼在這裡

highlight.js 加行號

一開始在痞客邦套用 highlight.js 時, 沒有找到可以設定行號的功能. 隨後又在它的文件網站上看到作者希望保持原本 highlight.js 的設計初衷 "單純" (simplicity). 不只是程式上的單純化, 還有應用上的單純化, 簡單化. 因此原作者也就堅持不加上行號的功能_(註一). 所以使用時也就沒有多想, 沒有行號就沒有行號唄.

後來 (2016/10/19) 不經意在 GitHub 上發現有人幫它寫了個加行號的 plugin_(註二). 當時因為工作比較忙, 只是簡單的記錄下來, 想說以後有空再試吧. 沒想到一放就是好幾年, 今天清理未完成的貼文時看到它, 那就馬上來試試吧!

我不知道大家在痞客邦上貼文是怎麼處理的, 以下是我過去用過的方法:

• 直接用痞客邦提供的 '發表文章' 介面. (舊版的 '發表文章' 介面很令人抓狂, 應該是沒人還在用?)
• 後來試過所謂的所見即所得 (WYSIWYG)的離線編輯器, 如: Microsoft Word, WLW (Windows Live Writer) 或者其他類似的離線編輯器 (Open Live Writer). 我原本是用 WLW, 但是後來 WLW 被微軟完全停掉了, 電腦重新安裝時下載不到 Windows Live Essentials 了, 不得已只好試用 Word 打, 但是試了一次內建的 '上傳部落格' 功能就放棄, 原因是:
  • 它無法像 WLW 那樣自動下載網站的樣式, 離線檢查上傳之後的外觀.
  • 它無法像 WLW 那樣切換成純文字模式模式來直接檢視或修正 HTML tag. (我需要修改 HTML 附加 CSS 和 JavaScript)
  • 直接由 Word 剪下貼在痞客邦提供的網頁介面上則貼文中殘留太多不必要的樣式設定. 雖然這樣可以大致上保持原本 Word文件的外觀, 但也意味著貼文用的樣式必需一開始就完全固定下一來, 否則日後要修改並維持整體貼文風格的一致性代價是很高.
• 至於 OLW (Open Live Writer) 雖然保留了 WLW 的大部份功能, 但是:
  • 無法下載貼文回來修改. (只能修改由 OLW 送出的貼文)
  • Plugins 功能整個都不相容, OLW 官網也沒有提供任何 plugins, 所以沒辦法修改樣版, 也沒辦法客製快速功能.

我目前用的方法:

1. 使用 UltraEdit 和痞客邦舊版的 '發表文章' 介面, 但是切換到編輯器的純文字模式, 直接面對 HTML 語法來達成想要的效果. 例如: 附加共同的 CSS, 或者再作一些 CSS 的微調, 又或者想辦法停掉痞客邦的廣告... (哈哈, 因為工作的關係一天到晚在程式和網路協定裡打滾, 所以對 HTML 語法還算熟悉, 所以直接面對 HTML 語法並沒什麼壓力)
2. 使用 portable 版的 WLW (感謝 阿榮福利味), 加上一個叫 'Text Template' 的 plugin.

如果你有其他好用的 (你自己認為即可) 方法或工具, 歡迎留言告訴我喔!

前二天心裡有個念頭突然閃過, 於是用手機看了一下自己在部落格的 PO 文.

結果... 昏倒... 手機模式的 CSS Style 設定都沒有出現.

於是寫信給 客服, 客服的回信倒是蠻快的 :)

痞客邦部落格程式上色相關文章:

• Part1: SyntaxHighLighter
• Part2: highlight.js
• Part3: Prim.js

這個已經很多人寫過了, 不過我還是要記一下自己試的心得.

網站上查到的 99% 都說把 script 貼在 "側邊欄位設定-->頁尾描述". 其實這種作法會產生一個問題: 就是往後人家看你的部落格時, "每一篇" 都會去拉一次 SyntaxHighLighter 的 script. 可是又不是每一頁都有程式碼, 都需要用到 SyntaxHighLighter.