はてなにソースコードを記入する(はてなのシンタックス・ハイライト編)

はてなブログソースコードを掲載するには以下の3パターンがあるみたいです。

  1. はてなシンタックス・ハイライト
  2. Gist
  3. SyntaxHighlighter

 

今回ははてなシンタックス・ハイライトの追加を紹介します。

はてなシンタックス・ハイライトと言っても、2つの形式があります。それは

  1. スーパーpre記法
  2. Markdown

 

 

1.スーパーpre記法

まず、スーパーpre記法を紹介します。

スーパーpre記法を使って、プログラムコードなどの構文を色付け(ハイライト)することができます。(シンタックス・ハイライト)

ハイライトさせたいファイルタイプ(ここでは ruby を指定します)を、行頭の >|| の2本のパイプ( || )の間に指定し、

 >|ruby|
 class Foo
   def bar'baz' # return baz
   end
 end
 ||<

のように記述することで、

class Foo
  def bar'baz' # return baz
  end
end

と色付けされて表示されます。

※「>||」「||<」は必ず行頭になるよう記述してください。

現在対応しているファイルタイプは以下の通りです。

※ >|?| のように、2本のパイプの間に ? を入力すると、自動で判別されハイライトされます。ただしほとんどの場合、一行目が shebang (#!)でないと判別に成功しません。

 

a2ps a65 aap abap abaqus abc abel acedb actionscript ada aflex ahdl alsaconf amiga aml ampl ant antlr apache apachestyle arch art asm asm68k asmh8300 asn aspperl aspvbs asterisk asteriskvm atlas automake ave awk ayacc b baan basic bc bdf bib bindzone blank brainfuck bst btm c calendar catalog cdl cf cfg ch change changelog chaskell cheetah chill chordpro cl clean clipper clojure cmake cobol colortest conf config context cpp crm crontab cs csc csh csp css cterm ctrlh cupl cuplsim cvs cvsrc cweb cynlib cynpp d dcd dcl debchangelog debcontrol debsources def desc desktop dictconf dictdconf diff dircolors diva django dns docbk docbksgml docbkxml dosbatch dosini dot doxygen dracula dsl dtd dtml dylan dylanintr dylanlid ecd edif eiffel elf elinks elmfilt erlang eruby esmtprc esqlc esterel eterm eviews exim expect exports fasm fdcc fetchmail fgl flexwiki focexec form forth fortran foxpro fstab fvwm fvwm2m4 gdb gdmo gedcom gkrellmrc gnuplot go gp gpg grads gretl groff groovy group grub gsp gtkrc haskell hb help hercules hex hitest hog html htmlcheetah htmldjango htmlm4 htmlos ia64 icemenu icon idl idlang indent inform initex inittab ipfilter ishd iss ist jal jam jargon java javacc javascript jess jgraph jproperties jsp kconfig kix kscript kwt lace latte ld ldif lex lftp lhaskell libao lifelines lilo limits lisp lite loginaccess logindefs logtalk lotos lout lpc lprolog lscript lss lua lynx m4 mail mailaliases mailcap make man manconf manual maple masm mason master matlab maxima mel mf mgl mgp mib mma mmix modconf model modsim3 modula2 modula3 monk moo mp mplayerconf mrxvtrc msidl msql mupad mush muttrc mysql named nanorc nasm nastran natural ncf netrc netrw nosyntax nqc nroff nsis objc objcpp ocaml occam omnimark openroad opl ora pamconf papp pascal passwd pcap pccts perl pf pfmain php phtml pic pike pilrc pine pinfo plaintex plm plp plsql po pod postscr pov povini ppd ppwiz prescribe procmail progress prolog protocols psf ptcap purifylog pyrex python qf quake r racc radiance ratpoison rc rcs rcslog readline rebol registry remind resolv rexx rhelp rib rnc rnoweb robots rpcgen rpl rst rtf ruby samba sather scala scheme scilab screen sdl sed sendpr sensors services setserial sgml sgmldecl sgmllnx sh sicad sieve simula sinda sindacmp sindaout sisu skill sl slang slice slpconf slpreg slpspi slrnrc slrnsc sm smarty smcl smil smith sml snnsnet snnspat snnsres snobol4 spec specman spice splint spup spyce sql sqlanywhere sqlforms sqlinformix sqlj sqloracle sqr squid sshconfig sshdconfig st stata stp strace sudoers svn syncolor synload syntax sysctl tads tags tak takcmp takout tar tasm tcl tcsh terminfo tex texinfo texmf tf tidy tilde tli tpp trasys trustees tsalt tsscl tssgm tssop uc udevconf udevperm udevrules uil updatedb valgrind vb vera verilog verilogams vgrindefs vhdl vim viminfo virata vmasm vrml vsejcl wdiff web webmacro wget whitespace winbatch wml wsh wsml wvdial xdefaults xf86conf xhtml xinetd xkb xmath xml xmodmap xpm xpm2 xquery xs xsd xslt xxd yacc yaml z8a zsh
上記以外で確認したもの

2.Markdown

Markdownでのシンタックス・ハイライト

Markdownでシンタックス・ハイライトを使う場合は、バッククオート(`)を3つ並べたコードブロックを記述して、先頭のバッククオートの後に対応するファイルタイプを指定するみたいです。
(シンタックス・ハイライトに対応するファイルタイプ一覧)

記述方法

```java
ここにソースコードを記述
```

表示例(Java)

public class Hoge {
  private static final String HOGE_ID = "hogeID-001";
  
  /** hoge1 */
  private String hoge1;
  
  /**
   * デフォルトコンストラクタ<br>
   */
  public Hoge() {
    this.hoge1 = HOGE_ID;
  }
  
  // hoge1を返却
  public String getHoge1() {
    return this.hoge1;
  }
}

まとめ

  • お手軽、簡単、動作も軽い
  • コメント行や文字列等も色分けさた
  • ソースコード中のHTMLタグも問題なかった
  • blogページからコピペしてもタブ等も問題無し
  • 行番号が表示されない

 

 

いま、GITの普及にしたがって、MarkDown方法を勧めます。