Home Blogger github highlight page Prism.js Blogger Tools code highlight 工具 Prism.js [用github當cdn使用]

Blogger Tools code highlight 工具 Prism.js [用github當cdn使用]

晚上8:25:00
Read
晚上8:25:00




目標


讓Blogger利用github page當作CDN,可以用Code HighLight.


執行步驟 

1.prismjs


先下載
https://prismjs.com/

先去決定你要用到哪些HighLight 先選擇下載


選擇你要支援的語言


下載JS CSS



2.用github page當作CDN

新增一個repository名稱 帳號名稱.github.io


建立一個資料夾 名稱隨便

建立一個index.html

範例code這邊


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>你好，GitHub</title>
  </head>
  <body>
    <h1>測試一下</h1>
    <h3>prismJS</h3>
    <div>拿來當cdn使用的js</div>
    <div>js</div>
    <div>https://你的id.github.io/js/prism.js</div>
    <div>css</div>
    <div>https://你的id.github.io/js/prism.css</div>
  </body>
</html>




建立一個js資料夾

把剛剛下載的prism.css prism.js放進去

執行git push

 
echo "# 你的id.github.io" >> README.md
git init
git add README.md
git commit m "first commit"
git remote add origin https://github.com/你的id/你的id.github.io.git
git push u origin master


你也可以打開網址 https://你的帳號.github.io/ 因該可以看到index.html的畫面

如果懶得做這個步驟 可以用直接用我上傳的link

3.修改blogger

進去html修改 選擇“主題”


新增css

在開頭找 title 往上面一行加入


<link href='https://tommyboy326.github.io/js/prism.css' rel='stylesheet' type='text/css'/>










新增js
找到</body> 往上面一行加入

<script src='https://tommyboy326.github.io/js/prism.js' type='text/javascript'/>




對了要貼上程式碼就是

<pre>
<code class="language-html line-numbers"> 
```程式碼```

</code>
</pre>

紅色哪個就可以改成你要用的程式語言

使用到html的話需要encoder 這個是可能會使用到的htmlencoder 
https://www.opinionatedgeek.com/codecs/htmlencoder


Tags :
技術提供：Blogger.