網頁新功能－可以使用code block了

之後會持續把過去、現在、以及未來的程式慢慢放上來
所以免不了的需要加裝一些讓程式看起來美美的插件
另外也為了怕我以後忘了怎麼設定，順手在此做個筆記兼小教學

教學網站：[教學] 寫給會在部落格中撰寫程式碼的你 ─ 在網頁中嵌入高亮程式碼上色 (syntax highlighting)
裡面有交如何安裝JS和CSS，這裡就不贅述了
這邊主要是要紀錄該怎麼應用Plugins

第一個是基本放code block

<pre><code class="line-numbers language-c">
//要放的code（記得不能換行）
//line-numbers 是左邊顯示行數
//language-javascript 是要上色的語言
</code></pre>

另外有另一個格式－Line highlight

<pre data-line="1-5"><code class="language-markup">
//注意data-line這Class要放在 <pre> tag 裡面
//1, 3-5, 14這些用法都可以
//缺點是不能每行都顯示
</code></pre>

下面示範C++ code，需要注意的是，要用<code class="language-c">
編輯區打的是：

<pre><code class="line-numbers language-c"> //實際這裡不換行
#include & lt;iostream& gt; //注意要去空白
using namespace std;

int main(){
    cout &lt;&lt; "Hello world!";
}</code></pre>

這裡有個重點需要注意，要放在code block裡面的code如果有標籤的話，不能直接打 "<"和">"，而是"& lt;"和"& gt;"(去掉空白)
若是懶得一個字一個字改，這裡有網頁可以直接轉一整段的碼

實際顯示的是：

#include <iostream>
using namespace std;

int main(){
    cout << "Hello world!";
}