如何在 Google Blogger 插入代碼
Google Code Prettify
Google Code Prettify 是一個由 Google 開發的輕量級語法高亮工具，主要用於在 HTML 頁面中美化和高亮顯示源代碼。它的設計目的是簡化代碼的可讀性，並使其在網頁上顯示得更加美觀。
主要特點
-
簡單易用：Google Code Prettify 只需在 HTML 頁面中引入相應的 JavaScript 和 CSS 文件，然後在需要高亮的代碼區塊上添加特定的類名（如
prettyprint）即可實現語法高亮。 -
自動語言識別：該工具支持多種編程語言，並能自動識別代碼的語言類型，無需手動指定，這使得使用者在插入代碼時更加方便。
-
多種主題選擇：Google Code Prettify 提供多種 CSS 主題，使用者可以根據自己的需求選擇不同的樣式來顯示代碼。
-
輕量級：相較於其他語法高亮工具，Google Code Prettify 的加載速度較快，且不會對頁面性能造成顯著影響。
===
要在 Google Blogger 中顯示可複製的代碼，您可以按照以下步驟進行設置：
步驟一：添加必要的腳本和樣式
-
登錄到 Blogger 後台，選擇您要編輯的博客。
-
在左側菜單中，點擊 “主題”，然後選擇 “編輯 HTML”。
-
在
<head>標籤之間添加以下代碼，以引入 Google Code Prettify 的樣式和腳本：
--
<link href="https://cdn.jsdelivr.net/gh/google/code-prettify@master/styles/sunburst.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
--
這樣可以確保您的代碼區塊能夠正確高亮顯示。
>步驟二：添加 CSS 樣式
- 在上面同個 “編輯 HTML” 的地方, 底下 CSS 處, 可以添加一些 CSS 來美化代碼區塊。
--
.code {
display: block;
font-family: Courier New;
font-size: 10pt;
overflow: auto;
background: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
max-height: 200px;
line-height: 1.2em;
}
--
步驟三：插入代碼
- 在博客文章中，切換到 HTML 編輯模式，使用以下格式插入代碼：
--
<pre class="prettyprint">
<code class="lang-js">
// 在這邊將代碼貼上, 底下 Hello World 是範例
console.log('Hello World!');
</code>
</pre>
--
console.log('Hello World!');
--
步驟四：添加複製功能的腳本 (Optional)
- 在博客文章中，切換到 HTML 編輯模式，在最上方加上
--
<style>
.copy-code-button {
position: absolute;
top: 5px;
right: 5px;
padding: 5px;
font-size: 12px;
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
.copy-code-button:hover {
background-color: #ddd;
}
pre {
position: relative;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('pre').forEach(function(pre) {
var button = document.createElement('button');
button.className = 'copy-code-button';
button.textContent = 'copy';
pre.appendChild(button);
button.addEventListener('click', function() {
var code = pre.querySelector('code').innerText;
navigator.clipboard.writeText(code).then(function() {
button.textContent = 'copied!';
setTimeout(function() {
button.textContent = 'copy';
}, 2000);
});
});
});
});
</script>
這樣，您的代碼將會以高亮的形式顯示，並且用戶可以輕鬆地複製它。
留言
張貼留言