普通のhtmlなどでsyntaxhighlighterを読み込んで使う時のメモ

[`evernote` not found]
Bookmark this on Hatena Bookmark
Share on Facebook
LINEで送る

不明なところは,SyntaxHighlighterを参考にすれば良い.

  • 解凍したディレクトリ内のscriptsディレクトリを./scriptsへ,stylesディレクトリを./cssへ展開したとする.
  • html-script: trueオプションを有効にするために,shBrushXml.shは常時読み込む.
    
    
    
    
    
    
  • オートローダの実行など.
    ここは,適宜,対応するjsファイルを追加する.
    diff,dos,json,lisp,python,texとかがあると便利かも.
    個人的にはhaskellなんかも.

    
    
  • スタイルの修正.
    --- ../syntaxhighlighter_3.0.83/styles/shCoreDefault.css        2010-07-02 12:59:00.000000000 +0900
    +++ shCoreDefault.css   2015-10-21 18:56:36.000000000 +0900
    @@ -58,6 +58,7 @@
       position: relative !important;
       overflow: auto !important;
       font-size: 1em !important;
    +  border: 1px solid #ddd !important; /* added */
     }
     .syntaxhighlighter.source {
       overflow: hidden !important;
    @@ -229,7 +230,7 @@
       background-color: white !important;
     }
     .syntaxhighlighter .line.alt1 {
    -  background-color: white !important;
    +  background-color: #e0e0e0 !important; /* added */
     }
     .syntaxhighlighter .line.alt2 {
       background-color: white !important;
    @@ -242,6 +243,7 @@
     }
     .syntaxhighlighter table caption {
       color: black !important;
    +  background-color: #e0e0e0 !important; /* added */
     }
     .syntaxhighlighter .gutter {
       color: #afafaf !important;