close
【方法一：使用Google code-prettify專案】
【Code加入網頁】
在Html的<head>或<body>中加入
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
在Html中要放置程式Code的地方加入 <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code>
<pre class="prettyprint"> class Voila { public: // Voila static const string VOILA = "Voila"; // will not interfere with embedded <a href="#voila2">tags</a>. } </pre>
【Code加入痞客邦】
在後台管理中選擇【側欄管理/內容欄-頁尾描述/內容欄】中加入
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
就可以在內容中使用<pre class="prettyprint">...</pre> or <code class="prettyprint">...</code>
【方法二：使用highlight.js專案】
這是我目前我在部落格中加入的方案<<可參考highlight.js官網>>。
【Code加入網頁】
在Html的<head>或<body>中加入
<link rel="stylesheet" title="Dracula" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dracula.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});
</script>然後在code的Tag中，指定程式語言是哪一種，例如：html jacascript cs .....
<pre><code class="javascript">...</code></pre>【Code加入痞客邦】
在後台管理中選擇【側欄管理/內容欄-頁尾描述/內容欄】中加入上述的程式碼即可。
文章標籤
全站熱搜
留言列表
產品資訊 (1)
