Syntax highlight for blogger

-
Blogger 沒支援code 語法顯示, 觀看code 像筆記本那樣, 關鍵字, 縮排無法顯示

Google 自家的Google Code Prettify
https://github.com/google/code-prettify
植入Blogger 可參考github 裡的Getting Started


下面簡單記錄過程
  •  Step 1
到Blogger 後台, 選擇版面配置, 新增小工具

  • Step 2
新增HTML/JavaScript


  • Step 3
填入相關內容, CSS Style 可依個人喜好設定

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  • Step 4
設定完成, 開始po文
切換至HTML 編輯模式
將Code 貼在標籤<pre>...</pre>的範圍內, 如要顯示行號, 在class 內增加linenums 即可
<pre class="prettyprint">
USER-CODE
</pre>

// 顯示行號
<pre class="prettyprint linenums">
USER-CODE
</pre>

如果code 中包含特殊符號「"」,「&」,「>」,「<」, 請先執行HTML 轉換後再貼上
http://www.yosia.net/widget/html-code-converter


以上即可在文章中, 以類IDE, notepad++方式顯示code 😄

留言

張貼留言

這個網誌中的熱門文章

[VB6]使用File Dialog選擇檔案

-
圖片
加入 Common Dialog 的控件 , 成功加入後出現紅框的 Icon 表示成功 Microsoft Common Dialog Control 6.0 Control Object of Form 先在 Form 上建立 CommonDialog 的控件 , 如未建立使用控件會跳出 Variable not defined. Button 呼叫 CommonDialog, 顯示 FileDialog Private Sub CTL_BTN_SEL_FILE_Click() With CommonDialog1 .DialogTitle = "Select the Report File" .Filter = "Custom Format (*.xls)|*.xls" .Flags = .Flags + cdlOFNHideReadOnly .InitDir = specialPath("Desktop") .ShowOpen CTL_BTN_SEL_FILE.Caption = .fileName End With End Sub Property DialogTitle As String 設定 Dialog 的 Title Property Filter As String 設定檔案類型 https://docs.microsoft.com/en-us/previous-versions/visualstudio/visual-basic-6/aa238813(v=vs.60) Property Flags As Long 設定屬性 https://docs.microsoft.com/en-us/previous-versions/visualstudio/visual-basic-6/aa238842(v=vs.60) Property InitDir As String 設定初始位置 Sub ShowOpen () 顯示 File Dia...
閱讀完整內容

[VB6]MSFlexGrid使用記錄

-
圖片
- 設定 於 Components 加入 MSFlexGrid Microsoft FlexGrid Control 6.0 (SP6) C:\Windows\SysWow64\MSFLXGRD.OCX 加入後即在 Component Panel 上出現 MSFlexGrid 的控件 ( 紅框處 ) 在 Form 上建立 MSFlexGrid 控件 ,  對控件按右鍵可設置其 Property Common Property Style Property   Font Property   Color Property   Picture Property 在 Code 中設置 Property 較有彈性 , 故於選單中的屬性怒不設定 - 記錄 ' configuration property of MSFLESGRID1 With MSFlexGrid1 .AllowBigSelection = False .ColAlignment(-1) = flexAlignCenterCenter .FixedCols = 0 .FixedRows = 1 .HighLight = flexHighlightNever .ScrollBars = flexScrollBarVertical .ScrollTrack = True End With Property AllowBigSelection As Boolean 在 Row / Column 點選 Header 時 , 全選該 Rows 或 Columns Property ColAlignment (index As Long) As Integer 指定 Columns 的文字對齊 , -1 表設置全部 Columns Property FixedCols As Long Property FixedRows As Long 指定 Header 的數量 Property HighLight As HighLightSettin...
閱讀完整內容