搜尋此網誌

顯示具有 部落格設定 標籤的文章。 顯示所有文章
顯示具有 部落格設定 標籤的文章。 顯示所有文章

Code Prettify 取代 SyntaxHighlighter

很久之前SyntaxHighlighter常會發生程式碼無法上色的問題,最近這一陣子因為發現部落格常常載入過久,這才發現原來好用的SyntaxHighlighter似乎掛掉一陣子了,目前找了Code Prettify來替代掉SyntaxHighlighter

首先一樣到後台的head裡將SyntaxHighlighter相關外掛移除,並加上jsdelivr提供的Code Prettify套件

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<style>
  li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
   list-style-type: decimal !important
  }
  .prettyprint {
    overflow: auto
  }
</style>

另外這邊也有提供一些skin可供替換,請參考以下連結,使用方式為在run_prettify.js後面加上「?skin=套件名稱」,比如MH目前比較中意sons-of-obsidian,則改為「run_prettify.js?skin=sons-of-obsidian」
https://raw.githack.com/google/code-prettify/master/styles/index.html

使用方式則為
<pre class="prettyprint">你的程式碼貼這邊</pre>

範例如下
#include <stdio.h>

int main(void) {

    printf("Hello World!\n");
    return 0;

}

但當程式碼很長時,會不太容易指出哪段,所以通常會標上行號,使用方式是在pre class裡加上「linenums」,例如「pre class="prettyprint linenums"」,而且值得一題的是複製程式碼的時候不會複製到行號

範例如下
#include <stdio.h>

int main(void) {

    printf("Hello World!\n");
    return 0;

}

如果行號不想從 1 開始的話,可以在「linenums」後面加上「:起始行號」,例如「pre class="prettyprint linenums:123"」

範例如下
#include <stdio.h>

int main(void) {

    printf("Hello World!\n");
    return 0;

}

另外由於< >與&等一些常用符號會因為HTML關係無法正常顯示,建議直接將< >要改成「&lt; &gt;」,&則要改成「&amp;」等xml格式,當然也可以加個<xmp></xmp>將程式碼包起來,範例如下,但這樣在所見即所得與HTML切換時還是會變亂碼,而且在Code Prettify奇數行的行距會變得比較大不知道是不是bug

<pre class="prettyprint"><xmp>你的程式碼貼這邊
</xmp></pre>

用MathJax在網頁或部落格顯示數學方程式

以往在編寫含有數學式的文章時,都需要將先在 MathType、Word 或 LaTeX 編輯好數學式再截圖並放到圖片空間才能貼在網頁或部落格中使用,若要修改就必須再截圖一次,使用上非常不方便

現在有了 MathJax 就完全解決這個問題(手機可能無法正常顯示),做法很簡單,以 Blogger 為例,請先到後台的「主題」→「編輯HTML」,在 <head> 後面貼上

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML" type="text/javascript">
</script>



其他解說可參考官網 Simple integration

使用方式為在想要表式數學的地方先加上以下符號,中間的 ... 插入想要的數學式
$ ... $ 或 \( ... \)
或者用以下方法顯示獨立一行的方程式
$$ ... $$ 或 \{ ... \}

以下為測試結果
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$


若要替方程式加上編號的話,可參考 MathJax in Blogger 這篇文章的方式

<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>   
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                   displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>



使用方式如下,eq_name 請自行修改成想要表示該方程式的名字
\begin{equation}\label{eq:eq_name}
...
\end{equation}
範例
\begin{equation}\label{eq:eq_name}
E=mc^2
\end{equation}


而引用方式則為
(\ref{eq:eq_name})
範例
引用 (\ref{eq:eq_name}) 式子

不過如果文章裡常有程式碼或其他特殊符號時,還滿容易會出現 Undefined control sequence,主要是因為$符號的關係,改成全形就解決了,使用前請自行檢查一下

Blogger程式碼資料區塊外加邊框

本篇文章參考自:Fun New Run High,並增加一些MH自己試出來的結果

常逛一些寫程式的部落格的人應該都會覺得很好奇,為什麼有些人的程式碼可以外加邊框,如下面的範例:



雖然現在Blogger已經有提供引用的指令,但感覺效果很差,類似每一行開頭都按一次Tab,要達成這樣的效果其實很簡單,在"設計"裡"修改 HTML"選項裡,在"修改範本"的<head> </head>間加上以下程式碼:

quote {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow: auto;
background: #fff5ee url(圖片網址) left top repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 0 0 15px;
}

例如MH我就放在<b:skin><![CDATA[之後

而圖片部分你也可以先試用 skyvee大 的範例圖片(點我下載),將"圖片網址"四個字替換成真正的圖片網址即可,加了這個功能,以後只要在HTML模式底下加上<quote></quote>,就會產生邊框了,有了這個功能,會不會覺得自己的程式碼看起來有一種高手的感覺呢XD

當然並不是每個人都想要有這種的邊框,只要參照下面MH的範例,你也可以做出屬於你自己的邊框

在font-family裡可以改成你要的字型,比如說MH現在將"Courier New"改成"標楷體",那麼就會真的變成標楷體,如下圖的範例



font-size: XXpt則可以更改字體大小,用過word的人應該都知道是什麼,XX請填入你想要的字體大小,最小是8px,其他我就不多解釋了...

background就填入HTML的顏色,如上面的範例圖MH都是用"black",所以背景才是黑色的,HTML顏色請參考HTML顏色網站

而之後的"left top"則是圖片的位置,像是上面範例的CODE圖片的初始位置就是從左上角,當然,你也可以改成從右上、右下之類的

Blogger 彈性版面,隨視窗大小調整版面寬度

<b:template-skin>
  <b:variable default='930px' name='content.width' type='length' value='1024px'/>
  <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
  <b:variable default='360px' name='main.column.right.width' type='length' value='220px'/>

  <![CDATA[
  body {
    min-width: $(content.width);
  }

  .content-outer, .content-fauxcolumn-outer, .region-inner {
    min-width: $(content.width);
    max-width: $(content.width);
    _width: $(content.width);
  }

由上面程式碼可知content.width均代表1024px,而min-width與max-width也都被設定成content.width,也就是版面寬度固定為1024px,只要將max-width: $(content.width);改成max-width: 100%;即可

去除"繼續閱讀"時網址多加上"#more"

部落格文章過長時,MH都會加上
<!--more-->
來減少首頁瀏覽的篇幅,不過當點"繼續閱讀"時,網址後面會自動多加上#more,而文章也會跳至more位置繼續閱讀,若要去除該現象,需修改範本。

先依照下列流程開啟html範本
範本 → 範本 → 修改HTML → 繼續 → 勾選左上角的展開小裝置範本


找到下列語法
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
或者你的語法比較短,也有可能是
<a expr:href='data:post.url + &quot;#more&quot;'>

將該語法改簡單一些
<a expr:href='data:post.url'>

由此可知就是將
+ &quot;#more&quot;
會加上#more的語法砍掉而已

移除blogger的"訂閱:文章(Atom)"

要移除blogger的"訂閱:文章(Atom)",有兩種方法

1.
在css中加入以下語法
.blog-feeds, .post-feeds{
  display :none;
}


2.
到"設計" -> "修改HTML" -> "展開小裝置範本"打勾,找到下面兩行,然後刪掉就可以了
<b:include data='feedLinks' name='feedLinksBody'/>
<b:include data='post.feedLinks' name='feedLinksBody'/>

移除blogger的"XX範本. 由 Blogger 技術提供."

要移除blogger的"XX範本. 由 Blogger 技術提供."的字眼,有兩種方法:

1.
到"設計 → 修改html"
在"/b:skin"前加入以下css語法
#Attribution1{display:none;}


2.
到"設計 → 範本設計工具 → 進階 → 新增css"
#Attribution1{display:none;}


雖然瀏覽部落格時已經看不到Attribution了,不過到"版面配置"去看還是會發現Attribution這個版權小工具還在



要怎麼移除呢?嘿~很簡單,只要改一下HTML就可以了

首先一樣先開啟"設計 → 修改html",搜尋以下HTML程式碼,找到該位置
<b:widget id="Attribution1" locked="true" title="" type="Attribution">

若搜尋不到以上HTML程式碼,那就試試只搜尋"Attribution"看看,反正版權宣告的小工具ID一定是Attribution

接著將"locked='true'"改成"locked='false'",就是不要將小工具鎖定



按下"儲存範本"後回到"版面配置",現在應該就能發現"Attribution"已經可以移動或更改了



想移除的話就按"編輯"再選"移除"就好了