カレンダー

11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

広告



最近の記事

カテゴリー

DATE: CATEGORY:TECH


ブログのソースコードをキレイに表示するための、
SyntaxHighlighter 3.0

このSyntaxHighlighter 3.0 の細かな設定のメモ。

基本的な導入・設定方法は、こちら。
ブログにソースコードを貼り付けるためのSyntaxHighlighter3.0の設定方法
【続】ブログにソースコードを貼り付けるためのSyntaxHighlighter3.0の設定方法:なんとなしの日記

Beauty of Water
Photo:Beauty of Water By puthoOr photOgraphy

細かなところの設定


タイトル表示

タイトルの表示が出来ます。

sample

<?php
// 『Hello World!』と表示させる
echo 'Hello World!';
echo 'Hello World!';
?>


行表示を消す

左の行表示もON/OFF出来ます。


<?php
// 『Hello World!』と表示させる
echo 'Hello World!';
echo 'Hello World!';
?>


ハイライト

特定の行だけハイライトも出来ます。


<?php
// 『Hello World!』と表示させる
echo 'Hello World!';
echo 'Hello World!';
echo 'Hello World!';
echo 'Hello World!';
echo 'Hello World!';
?>


開始行を変更する

行表示の開始行を設定できます。
(どこかの行を抜粋表示して説明する時とかに使えます。)


<?php
// 『Hello World!』と表示させる
echo 'Hello World!';
echo 'Hello World!';
?>


タイトルだけにして内容を隠す

こんなことも出来ます。


<?php
// 『Hello World!』と表示させる
echo 'Hello World!';
echo 'Hello World!';
?>


scriptを使った時の使い方

ソースコードを貼り付ける時は、scriptタグの方が良さげ。


使えるファイル形式


一応、使えるファイル形式を一覧にしとく。

<pre class="brush: XXX;" >

上記のXXXの部分に入る文字列と対応している形式一覧。


Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncoldfusionshBrushColdFusion.js
C++cpp, cshBrushCpp.js
C#c-sharp, csharpshBrushCSharp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
ErlangerlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLhtml, xhtml, xml, xsltshBrushXml.js


Load方法


Autoloaderを利用して必要なファイルだけロードする。
【続】ブログにソースコードを貼り付けるためのSyntaxHighlighter3.0の設定方法:なんとなしの日記

CSSのカスタマイズ


各行毎に色を変える方法

「shThemeDefault.css」の修正

.syntaxhighlighter .line.alt1 { background-color: white !important; }
.syntaxhighlighter .line.alt2 { background-color: white !important; }

.syntaxhighlighter .line.alt1 { background-color: white !important; }
.syntaxhighlighter .line.alt2 { background-color: #EEE !important; }


chromeの縦スクロールバーが出る問題の対策

「shCoreDefault.css」の修正

.syntaxhighlighter {
overflow: auto !important; /*autoであることを確認*/
overflow-y: hidden !important; /*追加*/
}


IEなどで最後の行が表示されない問題の対策

「shCoreDefault.css」の修正

.syntaxhighlighter table {
margin-bottom: 1em !important; /*追加*/
}


その他


ちょっと一手間

ブログとかに貼り付ける時に毎回、このタグを書くのが面倒くさい。
ので、辞書登録でこんな感じで登録してます。
----------------
ソース → <pre class="brush: ;" title="code" ></pre>
ソース → <script class="brush: ; type="syntaxhighlighter" title="code"><![CDATA[]]></script>
----------------
そしたら、少し楽に使えます。

タグ : syntaxhighlighter 設定 カスタマイズ TECH

Comment

コメントの投稿

管理者にだけ表示を許可する


トラックバック


この記事にトラックバックする



copyright © なんとなしの日記 all rights reserved.
内職☆在宅ワークの最強は?アフィリエイト!. 初心者だってカッコ良いホームページ作るぅ!
Powered by FC2ブログ
Related Posts Plugin for WordPress, Blogger...