DokuWikiで情報発信

個人での情報発信や社内での情報共有に便利なDokuWikiを紹介するサイトです。

ユーザ用ツール

サイト用ツール


Top     SiteMap

plugin:syntaxhighlighter3.html



「プラグイン」に戻る

DokuWikiおすすめプラグイン一覧。まとめ

DokuWikiプラグイン : Syntaxhighlighter3

概要

CSS 設定

共通のcssを修正して見やすくする

shCoreDefault.css

lib/plugins/syntaxhighlighter3/sxh3/pkg/style/shCoreDefault.css

設定:縦スクロールバーを消す

.syntaxhighlighter {
  (略)
  overflow: auto !important;
  overflow-y: hidden !important;  <- この行を追加
  (略)
}

shCore.css

lib/plugins/syntaxhighlighter3/sxh3/pkg/style/shCore.css

.syntaxhighlighter {
  width: 75% !important;          <- 修正 元々は100%
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
}


.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
  margin-left: .5em !important;/*add*/
  padding-left: .5em !important;/*rewrite*/
}

/* captionをつけたコードは下だけ、無いコードは上下に間を空ける */
.syntaxhighlighter table tr > td {
  padding: .8em 0 !important;/*add*/
}
.syntaxhighlighter table > caption + tbody > tr > td {
  padding: 0 0 .8em !important;/*add*/
}

テーマごとのCSSを修正

shThemeDefault.css

shThemeDefault.cssを利用した場合のバックグラウンドの色を変更する。

lib/plugins/syntaxhighlighter3/sxh3/pkg/style/shThemeDefault.css

.syntaxhighlighter {
  background-color: #F2F5F8 !important;
  border:1px solid #CBD7DF !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: #F2F5F8 !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: #F2F5F8 !important;
}

言語ごとの修正

lib/plugins/syntaxhighlighter3/sxh3/pkg/scripts/shBrushPython.js

Emacsテーマだと、pythonで、@XXXの文字がほとんど見えないので修正

変更前

        { regex: /^\s*@\w+/gm,                css: 'decorator' },

変更後

        { regex: /^\s*@\w+/gm,                css: 'color1' },


利用時の書き方

デフォルトの表示

#/bin/sh
[ -d $logdir ] || mkdir $logdir
echo "test"

<sxh bash>
[ -d $logdir ] || mkdir $logdir
echo "test"
</sxh>


右上の緑のSyntaxHighlighter3の説明の四角を消す

toolbar:false を書く。

#/bin/sh
[ -d $logdir ] || mkdir $logdir
echo "test"

<sxh bash toolbar:false>
[ -d $logdir ] || mkdir $logdir
echo "test"
</sxh>


行番号をなくす

gutter:false

#/bin/sh
[ -d $logdir ] || mkdir $logdir
echo "test"

<sxh bash gutter:false>
[ -d $logdir ] || mkdir $logdir
echo "test"
</sxh>


HTMLもカラー表示

html-script:true

<div>Some text</div>
<?php
public function render($mode, &$renderer, $data) {

  if($mode != 'xhtml') return false;
}
?>

<sxh php; html-script: true>
<div>Some text</div>
<?php
public function render($mode, &$renderer, $data) {

  if($mode != 'xhtml') return false;
}
?>
</sxh>

行のハイライト、タイトル

<sxh php; first-line: 70; highlight: [89,92]; title: New title attribute in action>

<sxh php; highlight: [9-18]>


カラーテーマの比較

shThemeDefault.css



shThemeDefault.cssの最後に以下を貼り付けた場合

.syntaxhighlighter {
  background-color: #F2F5F8 !important;
  border:1px solid #CBD7DF !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: #F2F5F8 !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: #F2F5F8 !important;
}

  • #のコメントが、普通の文字と似ていて、区別がつかない。
  • for とか doの青も見ずらい。

shThemeEclipse.css



shThemeEclipse.cssの最終行に以下を追加

.syntaxhighlighter {
  background-color: #F2F5F8 !important;
  border:1px solid #CBD7DF !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: #F2F5F8 !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: #F2F5F8 !important;
}

  • #のコメントが、普通の文字と似ていて、区別がつかない。

shThemeEmacs.css

  • 一番色が区別付きやすい。

shThemeMidnight.css

  • 赤文字が見にくい時がある。

shThemeDjango.css

  • if$?が同じ色なので、分けたい。

shThemeFaeToGrey.css

shThemeRDark.css

  • #!/bin/shが見にくい

shThemeMDUltra.css

  • loggerの行がすべて同じ色になっている。


言語の追加

  1. スクリプトを探してlib/plugins//syntaxhighlighter3/sxh3/pkg/scriptsに入れる
  2. [管理] - [サイト設定]から「Syntaxhighlighter3 プラグイン設定」に行き、エイリアスとスクリプトの関連づけを行う。

SyntaxHighlighterプラグイン [いかたこのたこつぼ]

WordPress用のWP SyntaxHighlighterをダウンロードすると、sample/lang-pack-for-wp-syntaxhighlighterの中にまとまって入っているので利用できる。

初期状態

コード1 xxxx.js, コード2 xxxx.js

applescript shBrushAppleScript.js,actionscript3 as3 shBrushAS3.js,bash shell shBrushBash.js,coldfusion cf shBrushColdFusion.js,cpp c shBrushCpp.js,c# c-sharp csharp shBrushCSharp.js,css shBrushCss.js,delphi pascal shBrushDelphi.js,diff patch pas shBrushDiff.js,erl erlang shBrushErlang.js,groovy shBrushGroovy.js,java shBrushJava.js,jfx javafx shBrushJavaFX.js,js jscript javascript shBrushJScript.js,perl pl shBrushPerl.js,php shBrushPhp.js,text plain shBrushPlain.js,ps powershell shBrushPowerShell.js,py python shBrushPython.js,ruby rails ror rb shBrushRuby.js,sass scss shBrushSass.js,scala shBrushScala.js,sql shBrushSql.js,vb vbnet shBrushVb.js,xml xhtml xslt html shBrushXml.js

追加した言語

vim
yaml
tcl  #BIG-IP iRUle用

, vim shBrushVimscript.js, yaml shBrushYaml.js, tcl shBrushTcl.js






「プラグイン」に戻る
DokuWikiおすすめプラグイン一覧。まとめ




plugin/syntaxhighlighter3.html.txt · 最終更新: 2017/09/17 by oreda admin