plugin:syntaxhighlighter4

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

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

管理画面のサイト設定よりどの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　から変更

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

「プラグイン」に戻る