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

広告

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

1.Default
2.Django
3.Eclipse
4.Emacs
5.FadeToGrey
6.MDUltra
7.Midnight
8.RDark

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

shCoreDefault.css
shThemeDefault.css

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

p6-1

p6-2

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

shCoreDjango.css
shThemeDjango.css

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

p6-3

p6-4

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

shCoreEclipse.css
shThemeEclipse.css

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

p6-5

p6-6

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

shCoreEmacs.css
shThemeEmacs.css

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

p6-7

p6-8

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

shCoreFadeToGrey.css
shThemeFadeToGrey.css

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

p6-9

p6-10

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

shCoreMDUltra.css
shThemeMDUltra.css

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

p6-11

p6-12

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

shCoreMidnight.css
shThemeMidnight.css

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

p6-13

p6-14

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

shCoreRDark.css
shThemeRDark.css

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

p6-15

p6-16

-- --

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

( Written by Tatsuo Ikura+ )