為什麼我們的微信文章版式比較好看？

作為技術**，刊載的文章**現**是必不可少的，之前我們也用過一些**高亮外掛程式，但是因一些不足後來就放棄了。

目前我們使用的**高亮外掛程式是 google 的 code-prettify，最初它是放在 google code 上的，現在也託管到了 github：。

code-prettify 的優點是體積小，使用簡單，而且自動識別所高亮的語言（雖然有時候識別的不對，但是其實沒幾個人真的在意對不對，大致能區分不同的語言成分就好了）。目前這個軟體已經有比較長的時間不更新了，雖然還有 bug，不過大致上的功能沒有什麼問題。

使用方法很簡單，首先你得在頁面中引入 code-prettify 的 js 檔案，然後在你要高亮**外使用

...

或...標籤即可。比如：


class
="prettyprint"
>
class voila

然後看起來效果就是：

class
voila

可能你使用了 code-prettify 之後也發現和我們的**樣式不同，其實，這只是我們使用了自己定製的乙個 css 樣式罷了，稍微研究下我們的頁面**，你就能找到這個 css 的，你可以根據你的喜好進行修改。

我們經常會發布各種英文文章的譯文，但是有時候，一些詞彙需要附上英文才能比較好的避免歧義。通常大家的做法都是在中文後面用括號圈上對應的英文，但是隨著 html5 規範的普遍支援，其實還有另外一種新的標籤可以更好的用於這種情況。那就是 ruby 標籤。

簡單的來說，ruby 標籤的基本格式如下：這裡寫中文english here，這個標籤用瀏覽器看的效果是這樣的：這裡寫中文english here。

目前應該還沒有支援 ruby 的 cms，所以，一般情況下你需要手工編輯你的頁面的 html 來插入這種標籤——當然，我是自己開發了乙個我的 cms 的外掛程式。

此外， ruby 標籤也是可以嵌入鏈結的，這種情況也比較常見。你可以自行摸索下。

最後，ruby 標籤自然有預設的顯示樣式，顯然，作為在意使用者體驗的你，肯定會給它單獨調整下 css 的，是吧？

實際上，除了以上兩點，我們並沒有特別不同的地方，不過使用者體驗的細節還是有所調整的，但是這些就是見仁見智的地方了，大家可以根據需要參考我們或其它一些在頁面體驗方面有所特長的頁面進行學習。

原文發布時間為：2017-12-14