prog_linenum

2024年3月13日 星期三

【網頁編輯】程式碼行號顯示,使用code-prettify

由於要在Blogger貼上程式碼的緣故,關於顯示行號,google搜尋了很多內容。加上自己本身不是摸前端的,只是想找個簡便的方法來顯示程式碼行號。


在此使用code-prettify

code-prettify網址


STEP1:

進入版面配置,點選「+新增小工具」









STEP2:

選擇「HTML JavaScript工具」













STEP3:

3-1. 標題隨意命名一個名稱,如:prog_linenum

3-2.貼上code-prettify的cdn網址:

<script src="https://cdn.jsdelivr.net/gh/google/
code-prettify@master/loader/run_prettify.js"></script>



完畢後按「儲存」


STEP4:


最後記得按下右下方的儲存,以儲存版面。











至此,第一階段設定完畢。

接下來就可以新增文章,切換到「HTML檢視」,插入下列html碼:

<pre class="prettyprint linenums">
...程式碼...
</pre>


示範程式碼,圖片1,程式碼超出範圍會溢出。

示範程式碼,圖片2,程式碼一列到底,也沒有卷軸。

注意:

程式碼用<pre></pre>包起來就好,有些網站上還有在<pre>內包上<code>,但測試結果會發覺行數會計算錯誤,以及灰、白相隔的背景顯示也會錯亂。

如下圖所示:














接下來就是要進行第二階段設定,主要是解決文字超出版面、沒有卷軸問題

STEP1:

進入主題設定,找一些資料,都會建議版面使用Simple樣式,在此,也是用網站建議的方式。














STEP2:

按下自訂旁的下拉箭頭,選擇編輯HTML


















找尋<style type='text/css'>的地方。由於有快千行的程式碼,且使用網頁的搜尋是找不到的。我的方式是把它貼到文字編輯器,如Notepad++,然後搜尋text/css,利用Notepad++顯示的行數對應到Blogger HTML編輯器的行數。









所找出的位置處








插入下列CSS程式碼:

pre.prettyprint{
width: auto;
overflow: auto;
max-height: 600px}

由於<style>本身有些程式碼已存在,所以新增的CSS程式碼把它插在</style>前方。如下圖所示:














程式碼貼完後,記得按 HTML編輯器右上方的儲存鈕。






最後,程式碼畫面行號正常顯示、且有卷軸。


















預設行號顯示為每隔五行,如果要每行顯示,則必須在剛設定的style中,再添加程式碼。

li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8 {   
list-style-type: decimal;}









結果如下:




沒有留言:

張貼留言

【PySide6】視窗事件_視窗本身相關事件

 本文主要是了解視窗事件被觸發的相關時機。 先給一段程式碼: """ 程式名稱:form_event.py 程式功能: 1. 視窗事件被觸發的相關時機 """ import sys from PySide6.QtGu...