設定項目の説明

ここではsyntax2htmlの詳細な設定について、説明します。

タイプ

構文のタイプを指定します。タイプの一覧は次のようになります。

  タイプ   タイプ   タイプ
1 ABAP 141 HTML+Evoque 281 Python 3.0 Traceback
2 ABNF 142 HTML+Genshi 282 Python Traceback
3 ADL 143 HTML+Handlebars 283 Python console session
4 ANTLR 144 HTML+Lasso 284 QBasic
5 ANTLR With ActionScript Target 145 HTML+Mako 285 QML
6 ANTLR With C# Target 146 HTML+Myghty 286 QVTO
7 ANTLR With CPP Target 147 HTML+PHP 287 RConsole
8 ANTLR With Java Target 148 HTML+Smarty 288 REBOL
9 ANTLR With ObjectiveC Target 149 HTML+Twig 289 RHTML
10 ANTLR With Perl Target 150 HTML+Velocity 290 RPMSpec
11 ANTLR With Python Target 151 HTTP 291 RQL
12 ANTLR With Ruby Target 152 Haml 292 RSL
13 APL 153 Handlebars 293 Racket
14 ActionScript 154 Haskell 294 Ragel
15 ActionScript 3 155 Haxe 295 Ragel in C Host
16 Ada 156 Hexdump 296 Ragel in CPP Host
17 Agda 157 Hxml 297 Ragel in D Host
18 Alloy 158 Hy 298 Ragel in Java Host
19 AmbientTalk 159 Hybris 299 Ragel in Objective C Host
20 ApacheConf 160 IDL 300 Ragel in Ruby Host
21 AppleScript 161 INI 301 Raw token data
22 Arduino 162 IPython 302 Rd
23 AspectJ 163 IPython console session 303 Red
24 Asymptote 164 IPython3 304 Redcode
25 AutoIt 165 IRC logs 305 ResourceBundle
26 Awk 166 Idris 306 Rexx
27 BBCode 167 Igor 307 Roboconf Graph
28 BC 168 Inform 6 308 Roboconf Instances
29 BNF 169 Inform 6 template 309 RobotFramework
30 BUGS 170 Inform 7 310 Ruby
31 Base Makefile 171 Io 311 Ruby irb session
32 Bash 172 Ioke 312 Rust
33 Bash Session 173 Isabelle 313 S
34 Batchfile 174 J 314 SCSS
35 Befunge 175 JAGS 315 SPARQL
36 BlitzBasic 176 JCL 316 SQL
37 BlitzMax 177 JSON 317 SWIG
38 Boo 178 JSON-LD 318 Sass
39 Boogie 179 Jade 319 Scala
40 Brainfuck 180 Jasmin 320 Scalate Server Page
41 Bro 181 Java 321 Scaml
42 C 182 Java Server Page 322 Scheme
43 C# 183 JavaScript 323 Scilab
44 C++ 184 JavaScript+Cheetah 324 Shen
45 CAmkES 185 JavaScript+Django/Jinja 325 Slim
46 CBM BASIC V2 186 JavaScript+Genshi Text 326 Smali
47 CFEngine3 187 JavaScript+Lasso 327 Smalltalk
48 CMake 188 JavaScript+Mako 328 Smarty
49 COBOL 189 JavaScript+Myghty 329 Snobol
50 COBOLFree 190 JavaScript+PHP 330 SourcePawn
51 CPSA 191 JavaScript+Ruby 331 SquidConf
52 CSS 192 JavaScript+Smarty 332 Stan
53 CSS+Django/Jinja 193 Javascript+mozpreproc 333 Standard ML
54 CSS+Genshi Text 194 Julia 334 SuperCollider
55 CSS+Lasso 195 Julia console 335 Swift
56 CSS+Mako 196 Kal 336 TADS 3
57 CSS+Myghty 197 Kconfig 337 TAP
58 CSS+PHP 198 Koka 338 Tcl
59 CSS+Ruby 199 Kotlin 339 Tcsh
60 CSS+Smarty 200 LLVM 340 Tcsh Session
61 CSS+mozpreproc 201 LSL 341 TeX
62 CUDA 202 Lasso 342 Tea
63 Ceylon 203 Lean 343 Termcap
64 ChaiScript 204 LessCss 344 Terminfo
65 Chapel 205 Lighttpd configuration file 345 Terraform
66 Cheetah 206 Limbo 346 Text only
67 Cirru 207 Literate Agda 347 Thrift
68 Clay 208 Literate Cryptol 348 Todotxt
69 Clojure 209 Literate Haskell 349 TrafficScript
70 ClojureScript 210 Literate Idris 350 Treetop
71 CoffeeScript 211 LiveScript 351 Turtle
72 Coldfusion CFC 212 Logos 352 Twig
73 Coldfusion HTML 213 Logtalk 353 TypeScript
74 Common Lisp 214 Lua 354 UrbiScript
75 Component Pascal 215 MAQL 355 VB.net
76 Coq 216 MOOCode 356 VCTreeStatus
77 Crmsh 217 MQL 357 VGL
78 Croc 218 MSDOS Session 358 Vala
79 Cryptol 219 MXML 359 Velocity
80 Csound Document 220 Makefile 360 VimL
81 Csound Orchestra 221 Mako 361 X10
82 Csound Score 222 Mask 362 XML
83 Cypher 223 Mason 363 XML+Cheetah
84 Cython 224 Mathematica 364 XML+Django/Jinja
85 D 225 Matlab 365 XML+Evoque
86 DTD 226 Matlab session 366 XML+Lasso
87 Darcs Patch 227 MiniD 367 XML+Mako
88 Dart 228 Modelica 368 XML+Myghty
89 Debian Control file 229 Modula-2 369 XML+PHP
90 Debian Sourcelist 230 MoinMoin/Trac Wiki markup 370 XML+Ruby
91 Delphi 231 Monkey 371 XML+Smarty
92 Diff 232 MoonScript 372 XML+Velocity
93 Django/Jinja 233 Mscgen 373 XQuery
94 Docker 234 MuPAD 374 XSLT
95 Duel 235 MySQL 375 XUL+mozpreproc
96 Dylan 236 Myghty 376 Xtend
97 Dylan session 237 NASM 377 YAML
98 DylanLID 238 NSIS 378 YAML+Jinja
99 EBNF 239 Nemerle 379 Zephir
100 ECL 240 NewLisp 380 aspx-cs
101 ERB 241 Newspeak 381 aspx-vb
102 Earl Grey 242 Nginx configuration file 382 autohotkey
103 Easytrieve 243 Nimrod 383 c-objdump
104 Eiffel 244 Nit 384 cADL
105 Elixir 245 Nix 385 ca65 assembler
106 Elixir iex session 246 NumPy 386 cfstatement
107 Elm 247 OCaml 387 cpp-objdump
108 EmacsLisp 248 ODIN 388 d-objdump
109 Embedded Ragel 249 Objective-C 389 dg
110 Erlang 250 Objective-C++ 390 eC
111 Erlang erl session 251 Objective-J 391 liquid
112 Evoque 252 Octave 392 mozhashpreproc
113 Ezhil 253 Ooc 393 mozpercentpreproc
114 FSharp 254 Opa 394 nesC
115 Factor 255 OpenEdge ABL 395 objdump
116 Fancy 256 PHP 396 objdump-nasm
117 Fantom 257 PL/pgSQL 397 reStructuredText
118 Felix 258 POVRay 398 reg
119 Fish 259 PacmanConf 399 sqlite3con
120 Fortran 260 Pan 400 systemverilog
121 FortranFixed 261 ParaSail 401 verilog
122 FoxPro 262 Pawn 402 vhdl
123 GAP 263 Perl    
124 GAS 264 Perl6    
125 GLSL 265 Pig    
126 Genshi 266 Pike    
127 Genshi Text 267 PkgConfig    
128 Gettext Catalog 268 PostScript    
129 Gherkin 269 PostgreSQL SQL dialect    
130 Gnuplot 270 PostgreSQL console (psql)    
131 Go 271 PowerShell    
132 Golo 272 PowerShell Session    
133 GoodData-CL 273 Praat    
134 Gosu 274 Prolog    
135 Gosu Template 275 Properties    
136 Groff 276 Protocol Buffer    
137 Groovy 277 Puppet    
138 HTML 278 PyPy Log    
139 HTML+Cheetah 279 Python    
140 HTML+Django/Jinja 280 Python 3    

構文

構文は10000文字以下の文字列を指定できます。貼り付けた構文は、自動でエスケープ処理(特殊文字への変換)されます。

スタイル

スタイルで構文のデザインを指定できます。次のスタイルが用意されています。

No. タイプ
1 algol
2 algol_nu
3 autumn
4 borland
5 bw
6 colorful
7 default
8 emacs
9 friendly
10 fruity
11 igor
12 lovelace
13 manni
14 monokai
15 murphy
16 native
17 paraiso-dark
18 paraiso-light
19 pastie
20 perldoc
21 rrt
22 tango
23 trac
24 vim
25 vs
26 xcode

背景色なし

背景色なし」をチェックすると、背景色(background-color)が指定されているスタイルを選択しても、CSSの背景色は指定されなくなります。

インラインCSS

インラインCSS」をチェックすると、HTMLコード中にインラインでCSSが設定されます。

インラインCSSを使用するメリットは、構文のハイライト表示でCSSの設定が不要になることと、簡単に複数のスタイルを同時に表示することが可能になることです。

デミリットは、コード量は多くなることと、CSSのカスタマイズが難しくなります。

インラインCSS では、CSS設定をタグ内で持つことのより、他のCSS設定からの影響をある程度排除しています。各ブログサービスでの表示については、次のサンプルを参照してください。

フォントサイズ

インラインCSS をチェックした場合、フォントサイズを指定できます。各ブログサービスのサンプルに出力例があります。

行番号表示

行番号表示」をチェックすると、構文の左側に行番号が表示されます。

サンプル

1
2
>>> print "Hello World"
Hello World

注釈

以前のインラインCSSでは行番号を表示した時に、スタイルに合わせてCSSを変更しませんでした。このため行番号表示時に表示が崩れると警告しました。しかし現在は、(ある程度)インラインCSSを設定するようにプログラムを変更しました。

ただ完全ではありません。必要に応じてブログ・webサイト側で、CSSを設定してください。

行番号表示を指定した場合、HTMLコードは次のようになります。
  • 構文は指定したクラス(デフォルトはhighligh)とtableを連結したクラス名(デフォルトではhighlightable)が指定された、tableタグに包まれます。
  • ライン番号はlinenosクラスを指定したTDタグに包まれ、さらにlinenodivクラスを指定したDIVタグ内に行番号が設定されます。
  • 構文はcodeクラスを指定した TDタグに包まれます。

コードのサンプル

<table class="highlightable">
<tr><td class="linenos"><div class="linenodiv"><pre>1
2</pre></div></td>
<td class="code"><div class="highligh"><pre>
<span class="gp">&gt;&gt;          &gt; </span>
<span class="k">print</span> <span class="s">&quot;Hello World&quot;</span>
<span class="go">Hello World</span>
</pre></div>
</td></tr></table>

開始番号

行番号の開始番号を指定します。デフォルトは1です。

specialクラス

specialクラスが指定されたSPANタグが、指定行番号毎に行番号に設定されます。デフォルトは0です。

0の場合は、specialクラスが指定されたSPANタグは設定されません。

サンプル(specialクラスを2行毎に設定)

<table class="highlightable"><tr><td class="linenos"><div class="linenodiv">
<pre>1<span class="special">2</span></pre></div></td>
<td class="code"><div class="highligh"><pre><span class="gp">&gt;&gt;&gt; </span>
<span class="k">print</span> <span class="s">&quot;Hello World&quot;</span>
<span class="go">Hello World</span>
</pre></div>
</td></tr></table>

CSSクラス

HTML及びCSSコードで使用する、CSSのクラスを指定します。デフォルトはhighlighです。

ブログやwebサイトで、同時に複数のスタイルを利用する場合などに指定します。同様なことはインラインCSSでも可能ですが、CSSクラスの違う複数のCSSを設置するため、コード量の圧縮やカスタマイズなどの利点があります。

サンプル(highligh1を指定)

<div class="highligh1" style="overflow:auto;word-wrap:normal;">
<pre style="padding:.5em;">
<span class="gp">&gt;&gt;&gt; </span><span class="k">print</span> <span class="s">&quot;Hello World&quot;</span>
<span class="go">Hello World</span>
</pre></div>

サンプル(highligh2を指定)

<div class="highligh2" style="overflow:auto;word-wrap:normal;">
<pre style="padding:.5em;">
<span class="gp">&gt;&gt;&gt; </span><span class="k">print</span> <span class="s">&quot;Hello World&quot;</span>
<span class="go">Hello World</span>
</pre></div>

強調表示行

強調表示する行を指定します。複数指定する場合は空白で区切ります。

サンプル(一行目を強調表示しています)

>>> print "Hello World"
Hello World

DIVタグ CSS

DIVタグのインラインCSSを指定します。デフォルトは overflow:auto;word-wrap:normal です。

サンプル(1行目でDIVタグでのインラインCSSを指定しています)

<div class="highligh" style="overflow:auto;word-wrap:normal;">
<pre style="padding:.5em;">
<span class="hll"><span class="gp">&gt;&gt;&gt; </span>
<span class="k">print</span> <span class="s">&quot;Hello World&quot;</span>
</span><span class="go">Hello World</span>
</pre>
</div>

PREタグ CSS

PREタグのインラインCSSを指定します。デフォルトは padding:.5em です。

サンプル(2行目でPREタグでのインラインCSSを指定しています)

<div class="highligh" style="overflow:auto;word-wrap:normal;">
<pre style="padding:.5em;">
<span class="hll"><span class="gp">&gt;&gt;&gt; </span>
<span class="k">print</span> <span class="s">&quot;Hello World&quot;</span>
</span><span class="go">Hello World</span>
</pre>
</div>

syntax2html へのリンクを表示

このチェックボックスをチェックすると、出力されるHTMLコードに syntax2html へのリンクが付加されます。リンクの表示が必要ない場合、チェックを外してください。



次に、syntax2htmlの活用を読む