目次

「プラグイン」に戻る

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

DokuWikiプラグイン : Syntaxhighlighter4


目次


関連


言語を追加したり、CSSのマージンの関係で、私は、Syntaxhighlighter3を使っています。

概要

plugin:syntaxhighlighter4

Syntaxhighlighter3から、jsをひとまとめにして通信量を減らすなど細かな改善がされている
使えるオプションが一部変わっている。

ただ、Syntaxhighlighter4は、言語の追加ができない。

CSSを修正して見やすくする

管理画面のサイト設定よりどのCSSを利用しているか確認して修正する。

theme-default.css

lib/plugins/syntaxhighlighter4/dist/theme-default.css

バックグラウンドの色を修正 

.syntaxhighlighter {
  background-color: white !important; }
  .syntaxhighlighter .line.alt1 {
    background-color: #F2F5F8 !important; }    <- 変更
  .syntaxhighlighter .line.alt2 {
    background-color: #F2F5F8 !important; }    <- 変更


縦のスクロールバーをなくす 

.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  line-height: 1.1em !important;
  margin: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  overflow-y: hidden !important;    <- 追加
  padding: 0 !important;



右に寄せる 

  .syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
    margin-left: .5em !important;           <- 追加
    padding-left: .5em !important; }        <- 0em　から変更


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

「toolbar:false」を書く。 

<shx コード toolbar:false>


例

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


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



<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>


関連





「プラグイン」に戻る