Octopress程式碼高亮問題（Windows10）

weixin_33749242發表於2018-07-26
Windows

layout: post
title: "Octopress程式碼高亮問題（Windows10）"
date: 2016-04-30 00:57:01 +0800
comments: true
categories: [octopress]

首先我要用祭出一段程式碼。。

<?php
    for($i=0;i<100;i++){
    echo "Octopress 的程式碼高亮真的真的有坑！！！"
}

?>

之前在寫部落格的時候就有發現，我的用markdown語法寫出來的程式碼好像是和別人的不一樣。後來發現是我的程式碼沒有用高亮。人家也是一個有追求的PHPer（尷尬臉）。我就查markdown語法啊。
語法是這樣給我說的

markdown 語法實現程式碼高亮有兩種方法

    1  ```[language] [title] [url] [link text]
         code snippet
       ```
    2 {\% codeblock [title] [lang:language] [url] [link text] \%}
        code snippet
    {\% endcodeblock \%}

唉，原來這麼簡單。改程式碼走起->rake generate ->reke deploy

去看看我可愛的帶顏色的程式碼呢。

！！！！！
為什麼我的部落格一片空白了！！！

然後我去度娘，去google。。

終於找到跟我一樣懵逼的小夥伴戳過去同情他

按照這個小夥伴的思路我開始裝Python

我裝的是Python2.7.11 選擇 Windows x86-64 MSI installer下載。然後一直下一步安裝。

安裝完成後新增環境變數
這個部落格可以參考
滑鼠右擊我的電腦，選擇屬性，再選擇高階系統設定，右下角有一個環境變數，點進去

1107940-a963aea9fb7ba8eb.jpg
1

找到path項，選擇編輯，把你的Python安裝路徑(如：C:\Python27)輸入進去，注意要用一個 ; 符號與前面的路徑分開，再點確定就可以了。完事後可以執行cmd，輸入python，如下顯示就是成功了


1107940-3c154ad6f97b4422.jpg
2

這個時候突然發現了另一篇博文

這個博文看起來要簡單點傳送門

按照下一篇博文的方法
<pre class="prettyprint linenums">
安裝Python
安裝Python,也是一路next就可以，部落格的程式碼高亮用到了Python的Pygments模組，在Python中安裝第三方庫需要使用easy_install，在下面地址下載跟Python相對應的安裝程式安裝後就可以使用easy_install了。

https://pypi.python.org/pypi/setuptools
easy_install會安裝在Python安裝目錄的Scripts目錄中，例如我的Python目錄是C:\Python27，所以需要將C:\Python27\Scripts目錄加入到環境變數中才能在命令提示符中使用easy_install命令。

在命令提示符中輸入如下命令就可以安裝Pygments了。

easy_install pygments
</pre>
https://pypi.python.org/pypi/setuptools去找到Windows (simplified)又懵逼了。它給了一段程式碼需要自己編譯執行ez_setup.py新建文字文件將網頁上的程式碼全部貼上下來，儲存重新命名為ez_setup.py
<pre class="prettyprint linenums">
Win+R
cmd
進到你剛剛儲存的那檔案的路徑
python ez_setup.py //安裝easy_install
等到安裝完成過後
將C:\Python27\Scripts目錄加入到環境變數中前面的C:\Python27\和你之前新增的Python的環境變數一樣
easy_install pygments
等到這一步完成後，基本就算大工告成了
</pre>

如果你還是出現相同問題的話，那請找網管重啟機器。

<?php
    echo"不出意外的話你的問題也應該解決了。\n"
    echo"你看我是不是一段有顏色的程式碼啊！";
?>

後記

在解決上述問題的過程中，瞭解到另一種程式碼高亮的方法

請戳這裡

使用google-code-prettify可以用來很方便地對網頁中的程式程式碼進行高亮顯示,從而在視覺上使得網頁上的程式碼看得比較舒服,這對網站站長來說是很重要的。

有兩種方法來啟用google-code-prettify,下面簡要介紹一下步驟。

方法一

(1) 從https://code.google.com/p/google-code-prettify/downloads/list中下載或者從http://www.colafile.com/file/145953 中打包下載pretty.css以及pretty.js,並儲存到本地伺服器的相應目錄中來引用

(2) 引用pretty.css以及pretty.js,然後在網頁中引用,引用方法為

    <link href="你儲存的目錄/prettify.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="你儲存的目錄/prettify.js"></script>

(3)

    <body>標籤改為<body onload="prettyPrint()">

(4) 將原始碼用標籤

    <pre class="prettyprint linenums">這是你的程式碼</pre>

包含起來,例如

    <pre class="prettyprint linenums">

    #include "x.h"

    main(){

     print("hello world!");

    }

    </pre>

相應的顯示效果為:
[圖片上傳失敗...(image-42e25b-1532593418840)]

方法二

(1) 到網址 https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js 中或者從http://www.colafile.com/file/145957 下載run_prettify.js檔案

(2) 引用run_prettify.js檔案,方法為

    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

或者

    <script src="你儲存的目錄/run_prettify.js"></script>

(3) 將原始碼用標籤

    <pre class="prettyprint">這是你的程式碼</pre>

包含起來,例如

    <pre class="prettyprint">

    #include "x.h"

    main(){

        print("hello world!");

    }

    </pre>

相應的顯示效果為:

[圖片上傳失敗...(image-5b54d2-1532593418840)]

如果你有更高的使用要求，可以到https://code.google.com/p/google-code-prettify/wiki/GettingStarted這個網頁中看更高階的使用方法

5/17/2016 8:28:40 PM 更新

設定顯示行號

<pre class="prettyprint linenums">
1、刪掉prettify裡的這兩個樣式。
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

2、替換以下內容，已經存在的替換，不存在的新增。
pre.prettyprint {
padding: 8px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
.prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}

/* Specify class=linenums on a pre to get line numbering /
ol.linenums {
margin: 0 0 0 33px; / IE indents via margin-left */
}
ol.linenums li {
padding-left: 12px;
color: #bebec5;
line-height: 18px;
text-shadow: 0 1px 0 #fff;
}
3、在pre標籤裡面一定不能有br/標籤,要換行直接回車.
</pre>

但是

這種方法在使用過程中，當是PHP程式碼時：如

    <pre class="prettyprint linenums">
        <?php
            echo "test!";
        ?>
    </pre>

這樣在實際的顯示過程中只有塊黑色的程式碼塊，程式碼並沒解析出來。

改成如下格式就能正常實現程式碼高亮效果。

        <pre class="prettyprint php">
            //去掉了PHP的開始和結束符
            echo "test!";
        
        </pre>

我沒有去具體研究這個原理，不過我推測是因為PHP的開始副 <? 和pre的開始結束符產生了混亂不能正確匹配，從而導致解析失敗。

相關文章