テーマ毎のソースコード表示例

広告

SyntaxHighlighterで公式に用意されているテーマは8個です。ここではそれぞれのテーマを利用した場合にソースコードがどのように表示されるのかをサンプルとして表示します。

Default

Defaultテーマを使用する場合は次のどちらかのCSSファイルを読み込んで下さい。

shCoreDefault.css
shThemeDefault.css

Defaultテーマを使用した場合のJavaとCSSのソースコードは次のように表示されます。

p6-1

p6-2

Django

Djangoテーマを使用する場合は次のどちらかのCSSファイルを読み込んで下さい。

shCoreDjango.css
shThemeDjango.css

Djangoテーマを使用した場合のJavaとCSSのソースコードは次のように表示されます。

p6-3

p6-4

Eclipse

Eclipseテーマを使用する場合は次のどちらかのCSSファイルを読み込んで下さい。

shCoreEclipse.css
shThemeEclipse.css

Eclipseテーマを使用した場合のJavaとCSSのソースコードは次のように表示されます。

p6-5

p6-6

Emacs

Emacsテーマを使用する場合は次のどちらかのCSSファイルを読み込んで下さい。

shCoreEmacs.css
shThemeEmacs.css

Emacsテーマを使用した場合のJavaとCSSのソースコードは次のように表示されます。

p6-7

p6-8

FadeToGrey

Defaultテーマを使用する場合は次のどちらかのCSSファイルを読み込んで下さい。

shCoreFadeToGrey.css
shThemeFadeToGrey.css

FadeToGreyテーマを使用した場合のJavaとCSSのソースコードは次のように表示されます。

p6-9

p6-10

MDUltra

MDUltraテーマを使用する場合は次のどちらかのCSSファイルを読み込んで下さい。

shCoreMDUltra.css
shThemeMDUltra.css

MDUltraテーマを使用した場合のJavaとCSSのソースコードは次のように表示されます。

p6-11

p6-12

Midnight

Midnightテーマを使用する場合は次のどちらかのCSSファイルを読み込んで下さい。

shCoreMidnight.css
shThemeMidnight.css

Midnightテーマを使用した場合のJavaとCSSのソースコードは次のように表示されます。

p6-13

p6-14

RDark

RDarkテーマを使用する場合は次のどちらかのCSSファイルを読み込んで下さい。

shCoreRDark.css
shThemeRDark.css

RDarkテーマを使用した場合のJavaとCSSのソースコードは次のように表示されます。

p6-15

p6-16

-- --

公式で用意されている8個のテーマについてどのように表示されるのかをご紹介しました。テーマはスタイルシートが定義されているだけですので、必要に応じてカスタマイズを行うこともできます。

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)