DokuWikiで情報発信

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

ユーザ用ツール

サイト用ツール


Top     SiteMap

サイドバー

Top     SiteMap

目次

DokuWikiを理解

DokuWikiの構築

よく確認するページ

最近の更新

plugin:syntaxhighlighter3.html



「プラグイン」に戻る

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

DokuWikiプラグイン : Syntaxhighlighter3

概要

設定

[管理] - [サイト設定]から好きなカラーテーマを選択する。
「shThemeEclipse.css」がオススメです。


CSS 設定

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

shCoreDefault.css

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

縦スクロールバーを消す

.syntaxhighlighter {
  (略)
  overflow: auto !important;
  overflow-y: hidden !important;  <- この行を追加     ※ shCore.cssを修正すれば、この設定は不要
  (略)
}

shCore.css

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

.syntaxhighlighter {
  width: 75% !important;          <- 修正 元々は100%     ※ 現在は、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

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

コメントが他の色が被っているので、最終行に以下を追加するといいです。

/* Comments stuff */
.syntaxhighlighter .comments,
.syntaxhighlighter .comments a {
    color: #778899 !important;
}

shThemeMidnight.css

  • カラフルなテーマ
  • 赤文字が見にくい時がある。

shThemeDjango.css

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

shThemeFaeToGrey.css

shThemeRDark.css

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

shThemeMDUltra.css

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


言語の追加

言語の追加方法

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

参考: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


WP SyntaxHighlighter

http://wordpress.org/extend/plugins/wp-syntaxhighlighter/

sample/lang-pack-for-wp-syntaxhighlighter

追加できる言語(一部)

vim
yaml
tcl  #BIG-IP iRUle用

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

SyntaxHighlighter Evolved Brush for other programming languages

APACHE BRUSH FOR THE SYNTAXHIGHLIGHTER EVOLVED WORDPRESS PLUGIN

https://www.tech-otaku.com/blogging/apache-brush-syntaxhighlighter-evolved-wordpress-plugin/

Having recently switched from SyntaxHighlighter MT to the SyntaxHighlighter Evolved plugin I was unable to get my custom Apache brush I use for .htaccess and *.conf files to work.

, apache shBrushApache.js




カラーテーマの追加

カラーテーマの追加方法

  1. 以下にCSSを置きます。
    /lib/plugins/syntaxhighlighter3/sxh3/pkg/styles
  2. 管理画面から conf/metadata.php に、追加したCSS名を追加しましょう。
# diff metadata.php metadata.php.org
7c7
< $meta['theme'] = array('multichoice','_choices' => array('shThemeDefault.css','shThemeEmacs.css','shThemeMidnight.css','shThemeDjango.css','shThemeFadeToGrey.css','shThemeRDark.css','shThemeEclipse.css','shThemeMDUltra.css','solarized-dark.css','tomorrow-night.css'));
---
> $meta['theme'] = array('multichoice','_choices' => array('shThemeDefault.css','shThemeEmacs.css','shThemeMidnight.css','shThemeDjango.css','shThemeFadeToGrey.css','shThemeRDark.css','shThemeEclipse.css','shThemeMDUltra.css'));


syntaxhighlighter-themes

https://github.com/kopepasah/syntaxhighlighter-themes

有名なカラーテーマが使えるようになります。

Solarized Theme
Tomorrow Theme

Manoz/SyntaxHighlighter-Evolved-Spacegray

https://github.com/Manoz/SyntaxHighlighter-Evolved-Spacegray

Original Sublime text 3 theme

コメントがみずらいので、色を変更するのと、Italicをやめました。
変更前

/* Comments stuff */
.syntaxhighlighter .comments,
.syntaxhighlighter .comments a {
    color: #778899 !important;
}

.syntaxhighlighter .jscript.comments,
.syntaxhighlighter .jscript.comments a {
    color: #778899 !important;
}

.syntaxhighlighter .php.comments,
.syntaxhighlighter .php.comments a {
    color: #778899 !important;
}



.syntaxhighlighter .comments {
    font-style: italic !important;
}

変更後

/* Comments stuff */
.syntaxhighlighter .comments,
.syntaxhighlighter .comments a {
    color: #f0f0f0 !important;
}

.syntaxhighlighter .jscript.comments,
.syntaxhighlighter .jscript.comments a {
    color: #f0f0f0 !important;
}

.syntaxhighlighter .php.comments,
.syntaxhighlighter .php.comments a {
    color: #f0f0f0 !important;
}

/* コメント
.syntaxhighlighter .comments {
    font-style: italic !important;
}
*/






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




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