先說一個前提，linux 中國的文章都是通過自身網站的 cms 進行編輯的，并沒有使用外部的那些第三方的微信編輯器。是以，如果你有一個可以編輯内容并形成網頁的 cms，那麼以下技巧可能就比較适合你使用；如果你沒有 cms ，理論上說你手工編輯 html 頁面也是可以的；或者，其實你可以複制我們的文章的格式到一個可視化 html 編輯器中，修改内容也可以。
<a target="_blank"></a>
作為技術網站，刊載的文章中出現代碼是必不可少的，之前我們也用過一些代碼高亮插件，但是因一些不足後來就放棄了。
code-prettify 的優點是體積小，使用簡單，而且自動識别所高亮的語言（雖然有時候識别的不對，但是其實沒幾個人真的在意對不對，大緻能區分不同的語言成分就好了）。目前這個軟體已經有比較長的時間不更新了，雖然還有 bug，不過大緻上的功能沒有什麼問題。
使用方法很簡單，首先你得在頁面中引入 code-prettify 的 js 檔案，然後在你要高亮代碼外使用 <code><pre class="prettyprint">...</pre></code> 或 <code><code class="prettyprint">...</code></code> 标簽即可。比如：
<code><script src="run_prettify.js"></script></code>
<code><pre class="prettyprint">class voila {</code>
<code>public:</code>
<code>// voila</code>
<code>static const string voila = "voila";</code>
<code>}</pre></code>
然後看起來效果就是：
<code>class voila {</code>
<code>}</code>
當你做好了一個可以在浏覽器中滿意呈現的頁面之後，你隻需要複制該頁面内容，貼到你的微信背景的編輯器中即可。
我們經常會釋出各種英文文章的譯文，但是有時候，一些詞彙需要附上英文才能比較好的避免歧義。通常大家的做法都是在中文後面用括号圈上對應的英文，但是随着 html5 規範的普遍支援，其實還有另外一種新的标簽可以更好的用于這種情況。那就是 ruby 标簽。
ruby 是振假名的意思，用于在 html 中标注注音。各個浏覽器對 ruby 标簽的支援程度不同，不過最基本的用法都是支援的，包括微信内的浏覽器。
簡單的來說，ruby 标簽的基本格式如下：<code><ruby>這裡寫中文<rt>english here<rt><ruby></code>，這個标簽用浏覽器看的效果是這樣的：這裡寫中文english here。
當然，實際上 ruby 标簽還許多子标簽和不同的格式變體，但是一方面各個浏覽器支援效果不同，另外一方面對微信浏覽器而言僅支援這種基本格式。需要深入研究的同學可以自行搜尋。
目前應該還沒有支援 ruby 的 cms，是以，一般情況下你需要手工編輯你的頁面的 html 來插入這種标簽——當然，我是自己開發了一個我的 cms 的插件。
此外， ruby 标簽也是可以嵌傳入連結接的，這種情況也比較常見。你可以自行摸索下。
最後，ruby 标簽自然有預設的顯示樣式，顯然，作為在意使用者體驗的你，肯定會給它單獨調整下 css 的，是吧？
實際上，除了以上兩點，我們并沒有特别不同的地方，不過使用者體驗的細節還是有所調整的，但是這些就是見仁見智的地方了，大家可以根據需要參考我們或其它一些在頁面體驗方面有所特長的頁面進行學習。
除此以外，做了幾年的微信文章釋出，我還有一點點小經驗可以分享給大家：
不建議調整正文字号，就用預設的 16px 即可，雖然看起來比較大——但是現在移動裝置分辨率越來越高了，是以較小的字号可能會讓部分使用者看起來比較累。當然，也可以考慮使用 14px，如果你的文章不全是密密麻麻的字的話。
正文文字的顔色不要出現太多，除了黑色以外，最多有兩種為宜。此外，在特殊情況下，你還可以考慮使用加粗，甚至斜體效果。
文内配圖，如果有可能盡量尺寸一緻，最少要考慮保證圖檔寬度一緻比較好。配圖下方，必要時可以用另外一種文字樣式來做圖檔說明。比如我們就是用斜體、灰色、下劃線樣式的字型作為圖檔說明。模糊的配圖不要也罷，除非必要，用動圖會顯得很 low——有些老網友或許還記得 20 年前的網頁上的那種 gif 動畫展覽吧？
題圖，如果你的标題不夠好，那就選張好的題圖吧，如果你能有一張切題的桌面級題圖，那顯然會讓你的公衆号訂閱者更高興一些——如果細心的話，或許你可以放上這張桌面級題圖的高分辨率原圖的 url 位址？
微信背景的文章編輯器對很多 html 标簽是不支援的，比如 <code>div</code>。是以，大家如果采用 div 布局的話，會發現桌面浏覽器上看的好好的樣式，複制到微信背景的編輯器中會變得慘不忍睹。這種情況下，你可以考慮用一些新的塊級元素，比如 <code>section</code>。
連結，微信文章僅在一些特定的情況下支援文内連結，是以，對于大部分公衆号的微信文章來說，都是沒辦法在文内加上連結的。但是作為 web 世界，有時候明明有連結的地方你不提供連結，你可以想象讀者的怒火。這時候，我們有兩種方式可以稍微補救。
對連結的文字加上特定樣式（如加上下劃線），以暗示此處有連結，然後在後面加個上标，比如[1]，并在文末單獨對這個上标提供連結，這樣需要的讀者可以複制該連結通路。不過要注意的是，微信文章不支援 <code>sup</code> 标簽，你可以用 <code>span</code> 标簽來達成類似效果。
如果文内連結不多，連結本身也不算長，你可以用括号圈起來寫上連結，不過如果連結太多，也太長時，這會影響正文閱讀效果的。
其實這兩種方式都是仿照紙質書籍這種無法做到超連結的出版物的。
對于長文章，你應該考慮在文内提供不同層次的大小标題。如果有可能，你還應該在頁首提供一個目錄、摘要等資訊。當然，我們使用了 cms，這種資訊是自動提取生成的，可能要友善一些。
原文釋出時間為：2017-12-14
本文來自雲栖社群合作夥伴“linux中國”
![Git 與 GitHub 的來曆[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)