設定項目の説明¶
ここでは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
スタイル¶
スタイルで構文のデザインを指定できます。次のスタイルが用意されています。
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
インラインCSS¶
「インラインCSS」をチェックすると、HTMLコード中にインラインでCSSが設定されます。
インラインCSSを使用するメリットは、構文のハイライト表示でCSSの設定が不要になることと、簡単に複数のスタイルを同時に表示することが可能になることです。
デミリットは、コード量は多くなることと、CSSのカスタマイズが難しくなります。
インラインCSS では、CSS設定をタグ内で持つことのより、他のCSS設定からの影響をある程度排除しています。各ブログサービスでの表示については、次のサンプルを参照してください。
行番号表示¶
「行番号表示」をチェックすると、構文の左側に行番号が表示されます。
サンプル
注釈
以前のインライン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">>> > </span> <span class="k">print</span> <span class="s">"Hello World"</span> <span class="go">Hello World</span> </pre></div> </td></tr></table>
- 構文は指定したクラス（デフォルトは
specialクラス¶
specialクラスが指定されたSPANタグが、指定行番号毎に行番号に設定されます。デフォルトは０です。
０の場合は、specialクラスが指定されたSPANタグは設定されません。
サンプル（specialクラスを２行毎に設定）
<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">>>> </span> <span class="k">print</span> <span class="s">"Hello World"</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">>>> </span><span class="k">print</span> <span class="s">"Hello World"</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">>>> </span><span class="k">print</span> <span class="s">"Hello World"</span> <span class="go">Hello World</span> </pre></div>
DIVタグ CSS¶
DIVタグのインラインCSSを指定します。デフォルトは overflow:auto;word-wrap:normal です。
サンプル（１行目でDIVタグでのインラインCSSを指定しています）
<div class="highligh" style="overflow:auto;word-wrap:normal;"> <pre style="padding:.5em;"> <span class="hll"><span class="gp">>>> </span> <span class="k">print</span> <span class="s">"Hello World"</span> </span><span class="go">Hello World</span> </pre> </div>
PREタグ CSS¶
PREタグのインラインCSSを指定します。デフォルトは padding:.5em です。
サンプル（２行目でPREタグでのインラインCSSを指定しています）
<div class="highligh" style="overflow:auto;word-wrap:normal;"> <pre style="padding:.5em;"> <span class="hll"><span class="gp">>>> </span> <span class="k">print</span> <span class="s">"Hello World"</span> </span><span class="go">Hello World</span> </pre> </div>
syntax2html へのリンクを表示¶
このチェックボックスをチェックすると、出力されるHTMLコードに syntax2html へのリンクが付加されます。リンクの表示が必要ない場合、チェックを外してください。
次に、syntax2htmlの活用を読む