使い方
[+コンテンツを追加]から[ウィジェット]を選びます。
次のように<pre>タグのclass属性に "brush: XXX" を設定します。※XXXは適用する言語名
保存してページ表示するとこんな感じ。
print "Hello, world!\n"
使える言語とサンプル
※とりあえずサンプルは一部だけ。
あるやつは名前をクリックすると飛べる。
言語 | brushに指定する名前 |
---|---|
ActionScript3 |
as3 |
Bash/shell |
bash, shell |
C/C++ |
c, cpp |
C# |
csharp |
ColdFusion |
cf |
CSS |
css |
Delphi |
delphi |
Diff |
diff |
Erlang |
erl |
Groovy |
groovy |
HTML |
html |
Java |
java |
JavaFX |
jfx |
JavaScript |
js |
Perl |
perl |
PHP |
php |
PowerShell |
ps |
Python |
py |
Ruby |
ruby |
Scala |
scala |
SQL |
sql |
Visual Basic |
vb |
XML |
xml |
プレーンテキスト |
text |
C/C++
設定
<pre class="brush: c"> <!-- ←C++の場合は cpp --> #include <stdio.h> <!-- 残念ながら<,>はエスケープしないとだめ --> int main(void) { printf("Hello, world!"); return 0; } </pre>
表示
#include <stdio.h> int main(void) { printf("Hello, world!"); return 0; }
C#
設定
<pre class="brush: csharp"> class HelloWorldApp { static void Main() { System.Console.WriteLine("Hello, world!"); } } </pre>
表示
class HelloWorldApp { static void Main() { System.Console.WriteLine("Hello, world!"); } }
CSS
設定
<pre class="brush: css"> .body { color: black; font-family: monospace; } </pre>
表示
.body { color: black; font-family: monospace; }
Java
設定
<pre class="brush: java"> public class Hello { public static void main(String[] args) { System.out.println("Hello, world!"); } } </pre>
表示
public class Hello { public static void main(String[] args) { System.out.println("Hello, world!"); } }
JavaScript
設定
<pre class="brush: js"> (function() { console.log("Hello, world!"); })(); </pre>
表示
(function() { console.log("Hello, world!"); })();
作業メモ
- SyntaxHighlighterという外部のJavaScript+CSSを使用
- 設定は右の管理メニュー[設定]>[ヘッダーを編集]から(ホスティングされている.jsファイル及び.cssファイルへのリンクを追加したのみ)
- 古いバージョンのSyntaxHighlighterには[クリップボードにコピー]ボタンがあったが、最新版にはない(環境に依存するから?)。代わりにダブルクリックで全選択ができるので、そうやってからコピーすることが推奨されている。