[教學] 將程式碼嵌入網頁blog中 – SyntaxHighlighter 超級懶人包


前言:如果有自己的網頁空間,用這個教學會比較快http://goo.gl/lywrT

1. 先下載SyntaxHighlighter

下載完你會看到有幾個檔案和資料夾
你可以先點兩下index.html應該會看到預設的程式碼

2. 將index.html 用編輯器打開(可用記事本或notepad++,我用Sublime)

 ....

夾起來的部分換成你的code
再點兩下index.html,你應該會看到你的程式碼,複製下來就可以用了

3.因為每個blog大小不一,需要改一些東西讓讓程式碼占的範圍縮小
打開styles/shCoreDefault.css
尋找「.syntaxhighlighter {
下面會看到一行:width: 100% !important;
將%的數字改成你想要的就好,我的blog寬是60
所以我改成:width: 60% !important;
重整index.html,再複製code就好囉~

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s