ソースコードの埋め込みに対応しました

使い方

[+コンテンツを追加]から[ウィジェット]を選びます。

 

次のように<pre>タグのclass属性に "brush: XXX" を設定します。XXXは適用する言語名

perlコードを埋め込む例
perlコードを埋め込む例

 

保存してページ表示するとこんな感じ。

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 &lt;stdio.h&gt; <!-- 残念ながら<,>はエスケープしないとだめ -->
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には[クリップボードにコピー]ボタンがあったが、最新版にはない(環境に依存するから?)。代わりにダブルクリックで全選択ができるので、そうやってからコピーすることが推奨されている。