WordPress Plugin CodeColorer For code snippet 讓文章中的程式碼片段顯示它應有的樣式

要想讓 WordPress 的程式碼片段可以顯示它該有的樣子,可以安裝 Code snippet 外掛。

但是因為 WordPress 的 Plugin for code snippet 有太多可供選擇使用,讓我不知道該用哪個好?

後來發現這款 CodeColorer 外掛支援了大部份常見的程式語言樣式,且使用上也很簡單。

使用時,只需用 [cc lang="要顯示的程式語言"] and [/cc] 將程式碼片段包起來就可以了,這樣就可以在網頁清楚呈現各式各樣的程式語法了。

下載與如何使用及詳細說明 可以造訪 CodeColorer 外掛網站


支援的程式語言

Here is list of supported by CodeColorer languages: abap, actionscript, actionscript3, ada, apache, applescript, apt_sources, asm, asp, autoit, avisynth, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_mac, caddcl, cadlisp, cfdg, cfm, cil, cmake, cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, erlang, fo, fortran, freebasic, genero, gettext, glsl, gml, gnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc, modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, perl, php-brief, php, pic16, pixelbender, plsql, povray, powershell, progress, prolog, properties, providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xml, xorg_conf, xpp, yaml, z80.

使用語法

To insert code snippet into your post (or comment) you should use [cc lang="lang"]code[/cc] or <codelang="lang">code</code> syntax. Starting from version 0.6.0 you could specify additional CodeColorer options inside [cc] tag:

1
[cc lang="php" tab_size="2″ lines="40″]// some code[/cc]

使用短碼標籤

Starting from CodeColorer 0.8.6 you can use short codes to insert code snippets. The short code in common looks like [ccMODE_LANG], where LANG is your programming language, and MODE is the one or more of following modes:

  • i – inline
  • e – escaped
  • s – strict
  • n – line_numbers
  • b – no_border
  • w – no_wrap
  • l – no_links

Small letter means enabled, capital – disabled. Examples:

PHP code with links enabled and line numbers disabled:

1
2
3
[cclN_php]
echo “hello"
[/cclN_php]

Already escaped HTML code:

1
[ccie_html]<html>[/ccie_html]

Ruby code without wrapping having tab size equal to 4:

1
2
3
[ccW_ruby tab_size="4″]
attr_accessor :title
[/ccW_ruby]

More examples could be found on the CodeColorer Examples page. You can find modes explained below.

可使用的參數

  • lang (string) – source language.
  • tab_size (integer) – how many spaces would represent TAB symbol.
  • line_numbers (boolean) – when true line numbers will be added.
  • first_line (integer) – a number of the first line in the block.
  • highlight (string) – a comma-separated list of line numbers to highlight (e.g. 1,5,8,9).
  • no_links (boolean) – when false keywords will be represented as links to manual.
  • lines (integer) – how many lines would be block height without scroll; could be set to -1 to remove vertical scrollbar.
  • width (integer or string) – block width.
  • height (integer or string) – height in pixels; used when lines number is greater then “lines” value.
  • rss_width (integer or string) – block width in RSS feeds.
  • theme (string) – color theme (default, blackboard, dawn, mac-classic, twitlight, vibrant).
  • inline (boolean) – when true forces code block to render inside <code></code> tag. Used to paste a single line of code into the regular text.
  • strict (boolean) – when true strict mode will be enabled. By default CodeColorer tries to guess whether strict mode is needed, so this option allows to force it on or off when automatic suggestion is wrong.
  • nowrap (boolean) – when false no horizontal scrollbar will be shown; instead code will be wrapped in the end of code box.
  • noborder (boolean) – when true no border will be shown around the code block.
  • no_cc (boolean) – when true the syntax in code block will not be highlighted, code will be rendered inside<code></code> tag.
  • class (string) – additional CSS classes to add to the wrapper HTML element.

You can use special tag [cci] instead of [cc] to force inline mode: [cci lang="lang"]code[/cci]

Most of these parameters could be configured via the CodeColorer options page.

發表迴響

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

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s