內容簡介
多年來,我一直使用 Alex Gorbatchev 的 SyntaxHighlighter 。多年以來,它一直為我服務良好。當我轉移到 WordPress 後,我嘗試了基於該庫的各種插件,如 SyntaxHighlighter Evolved。
我決定開始使用 Markdown 進行博客寫作。進行這次轉換時,我需要找到一種簡單的方法來突顯各種源代碼。有很多漂亮的庫使這變得簡單,例如 google-code-prettify 或 highlight.js。最終,我決定採用 highlight.js,因為它是自動化的,與 Markdown 的代碼語法輸出完美無瑕地配合。
很好,但我的現有源代碼示例使用 SyntaxHighlighter 對代碼塊的樣式進行格式化(例如使用 <pre class="brush: ruby;" /> )。我可以以幾種方式轉換它們:
更改數據庫
寫一個 JS 腳本將 <pre /> 結構轉換為 <pre><code /></pre>
編寫 JS 腳本調用 highlight.js 的 highlightBlock 方法
撰寫 WP 插件並輕鬆重格式化它 Ding Ding Ding
因此,這個 WordPress 插件將處理您的 SyntaxHighlighter 样式塊,使它們可以與 highlight.js out-of-the-box 配合。它還會將您使用 brush 類指定的語言添加為 <code /> 元素的類,遵循 HTML5 建議(following the HTML5 recommendation)。不會更改數據庫,因此,如果您決定返回 SyntaxHighlighter,則可以毫不費力地進行。
GeSHi
此插件現在支援轉換 GeSHi 样式的代碼塊!現在,您可以將插件從 WP-Syntax 和 WP-GeSHi-Highlight 轉換為 highlight.js。
GeSHi 使用的語法與 SyntaxHighlighter 接近,但是它不是將語言放在 class 屬性中,而是使用 lang 屬性。與 SyntaxHighligher 轉換類似,它將處理您的 GeSHi 样式塊,使其可以與 highlight.js out-of-the-box 配合。它還會將您使用 lang 屬性指定的語言添加為 <code /> 元素的 class。
外掛標籤
開發者團隊
原文外掛簡介
For years I’ve used Alex Gorbatchev’s SyntaxHighlighter. It has served me well over the years. When I moved to WordPress I tried various plugins based on the library, such SyntaxHighlighter Evolved.
I’ve decided to start blogging using Markdown. Making this move I needed to find a way to highlight various bits of source code in an easy way. There are many nice libraries that make this a snap, such as google-code-prettify or highlight.js. In the end I decided to go with highlight.js, for the simple reason that it is automatic, working flawlessly with Markdown’s code syntax output.
Great, but my existing source code examples use SyntaxHighlighter’s style for code blocks (using
Write a JS script to call highlight.js’ highlightBlock method
Write a WP plugin and reformat things easily Ding Ding Ding
So there you have it. This WordPress plugin will go through and process your SyntaxHighlighter style blocks into ones that highlight.js works with out-of-the-box. It will also add the language that you have specified with the brush class and add it as a class on the element (following the HTML5 recommendation). Nothing is changed in the DB, so if you decide to go back to SyntaxHighlighter, you can without any issues.
GeSHi
This plugin now supports conversion of GeSHi style code blocks! Now you can move from plugins such as WP-Syntax and WP-GeSHi-Highlight to highlight.js.
GeSHi uses the syntax that is close to SyntaxHighlighter, except instead of putting the language in the class attribute, it uses the lang attribute. Similar to the SyntaxHighligher conversion, it will go through and process your GeSHi style blocks into ones that highlight.js works with out-of-the-box. It will also add the language that you have specified with the lang attribute and add it as a class on the element.
