[Google Blogger ]如何在網頁中顯示程式碼區塊? | highlight
使用highlight實現程式碼區塊
有天，想要把自己學的程式語法，在網站上製作學習筆記，看過很多教學網站，都能在網頁上顯示程式語法區塊，並且能像在編譯器中一樣，做到高亮顯示，但在Blogger中該如何實現呢?
雖然Blogger可以使用<pre> <code> 的方式呈現，但顏色單一而且排版也不好看！ 後來，終於找到可以支援多種程式語言的highlight.js，使用方法和設定也不難，還有多種樣式可以選擇～～
highlight.js官方簡介
使用highlight.js顯示的Python語法/ Theme：vs2015
#讀取網路json檔位置
import requests
import pandas as pd
response =requests.get('https://cloud.culture.tw/frontsite/trans/emapOpenDataAction.do?method=exportEmapJson&typeId=M')
data = response.json()
df = pd.json_normalize(data)
df.head()
如何進行設定呢?
前往blogger後台/主題/自訂/編輯html，找到</head>後，將以下代碼貼於</head>之前，就已完成基本設定！
但目前的樣式設定是預設設定，可以到這邊去瀏覽喜歡的主題樣式，例如：背景是黑底或白底，關鍵字的顏色配置等，預設為default.min.css(白底)，但本站使用的是vs2015.css(黑底)的樣式!可以自行更換為喜歡的主題!
<!-- 請將以下代碼貼到</head>之前-->
<!-- 主題樣式1:default.min.css(擇一即可)-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
<!-- 主題樣式2:vs2015.css(擇一即可)-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/vs2015.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<script>hljs.highlightAll();></script>
進階設定:字型大小/複製按鈕
如果還想要再做更客製化的設定，可以在將以下代碼貼上，並修改參數設定
<!-- 請將以下代碼貼到</head>之前-->
<!-- 主題樣式1:default.min.css(擇一即可)-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
<!-- 主題樣式2:vs2015.css(擇一即可)-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/vs2015.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<!-- 設定按鈕-->
<script>hljs.highlightAll();
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre').forEach((block) => {
const button = document.createElement('button');
button.innerText = '複製';
button.className = 'copy-button';
button.addEventListener('click', () => {
const code = block.querySelector('code');
navigator.clipboard.writeText(code.innerText).then(() => {
button.innerText = '已複製!';
setTimeout(() => {
button.innerText = '複製';
}, 2000);
});
});
block.appendChild(button);
});
});
></script>
<style>
/* 自定義代碼塊樣式---------程式代碼格式 */
/* 設置代碼文本的樣式 */
code { font-size: 14px; /* 設置字體大小 */
line-height: 1.5; /* 設置行高為字體大小的1.5倍 */
}
/* 複製按鈕的樣式 */
.copy-button {
position: absolute; /* 絕對定位，相對於pre元素 */
top: 5px; /* 距離頂部5像素 */
right: 5px; /* 距離右側5像素 */
padding: 3px 8px; /* 設置內邊距，上下3像素，左右8像素 */
font-size: 16px; /* 設置字體大小 */
color: #fff; /* 設置文字顏色為白色 */
background-color: #2677a5;/* 設置背景顏色為淺藍 */
border: none; /* 移除邊框 */
border-radius: 4px; /* 添加圓角 */
cursor: pointer; /* 滑鼠懸停時顯示手型光標 */
}
/* 複製按鈕懸停效果 */
.copy-button:hover {
background-color: #2992bf;/* 滑鼠懸停時變為淺藍色 */
}
</style>
最後．文章中使用
完成設定後，未來只要在文章中使用<pre> <code> 將程式碼包覆，即可在文章中，呈現程式碼區塊拉！！
在文章貼中貼入以下html代碼,以Python樣式進行展示
<pre> <code class="language-Python" >
#顯示程式碼區塊/Python
import requests
import pandas as pd
response =requests.get('https://cloud.culture.tw/frontsite/trans/emapOpenDataAction.do?method=exportEmapJson&typeId=M')
data = response.json()
df = pd.json_normalize(data)
df.head()
</pre> </code>
上面程式碼在網頁中顯示的程式碼區塊
#讀取網路json檔位置
import requests
import pandas as pd
response =requests.get('https://cloud.culture.tw/frontsite/trans/emapOpenDataAction.do?method=exportEmapJson&typeId=M')
data = response.json()
df = pd.json_normalize(data)
df.head()
