SyntaxHighlighter on qwerty.work

SyntaxHighlighterでWindowsバッチファイルのソースコードやコマンドを装飾表示できるようにするshBrushBat.js

Mon, 09 Oct 2017 22:39:10 +0900

WEBサイトでソースをきれいに表示してくれるSyntaxHighlighterですが、コマンドプロンプト（DOS）の**バッチファイル（bat, cmd, com）のソースは標準で対応していません。でも、別でWindowsバッチファイル用のBrushファイル（shBrushBat.js）**を読み込ませれば対応できるようです。その方法を教えてくれる参考サイトをメモ。実際に組み込んだら成功しました。

shBrushBat.jsのダウンロード先と参考サイト

/dev/null &"); ?> /dev/null &"); ?> /dev/null &"); ?>

SyntaxHighlightersa作者のページ

/dev/null &"); ?> /dev/null &"); ?>

SyntaxHighlighterと類似の他のハイライター

highlight.js

参考サイトの説明によると12KBと超軽量で行番号表示がないなど、シンプルでいいらいい。

/dev/null &"); ?> 参考サイト /dev/null &"); ?>

Prism.js

/dev/null &"); ?> 参考サイト /dev/null &"); ?>

code prettifier（Google）

/dev/null &"); ?>

SyntaxHighlighter3のカスタマイズ

Thu, 16 Dec 2010 21:16:18 +0900

ソースをキレイに表示してくれる「SyntaxHighlighter3」ですが、少々不満あり。カスタマイズ方法を詳しく書いてくれているページ発見！

http://access2genzo.blog6.fc2.com/blog-entry-65.html http://access2genzo.blog6.fc2.com/blog-entry-65.html

http://access2genzo.blog6.fc2.com/blog-entry-67.html http://access2genzo.blog6.fc2.com/blog-entry-67.html

行を折り返す方法（2013/02/27追記）

Ver2.Xではできていた行の折り返しがSyntaxHighlighter3.0.83では標準ではできませんが、shCore.cssの71行目辺りを以下のように変更すればできるようです。

デフォルト

.syntaxhighlighter .line {
  white-space: pre !important;
}

変更後

.syntaxhighlighter .line {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

「pre-wrap」または「nomal」でもいいそうです。

その他のブラウザはわかりませんが、IE10とChromeではできました。以下のサイトを参考にしました。その他、行番号の無効化や奇数行と偶数行の背景色を変更する方法も書かれています。

http://waka8s.com/archives/sh3083-pre-wrap/ http://waka8s.com/archives/sh3083-pre-wrap/

ソースコードをきれいに装飾表示するアレ（SyntaxHighlighter）

Mon, 29 Nov 2010 14:49:12 +0900

ソースコードをハイライトしてくれる『SyntaxHighlighter』

最近のサイトでよく見るソースコードをきれい装飾して見せるJavascript。自分のホームページにも導入したいと思っていろいろ探して**『SyntaxHighlighter』**というのを見つけました。

サンプル

<pre class='brush:php'>
	<?php
		$p = "サンプル";
		echo $p;
	?>

作者のページ

http://alexgorbatchev.com/SyntaxHighlighter/ http://alexgorbatchev.com/SyntaxHighlighter/

https://github.com/syntaxhighlighter https://github.com/syntaxhighlighter

使い方

まずダウンロードして適当な場所に保存して解凍します。現在の最新は「SyntaxHighlighter** 3.0.83**」のようです。

ダウンロードリンク

http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current

仮に**「ルートディレクトリ/js/SyntaxHighlighter」**に保存した場合。

～内に以下を追加

<!--SyntaxHighlighter-->
<link rel="stylesheet" type="text/css" href="/js/SyntaxHighlighter/styles/shCore.css" />

<!-- 以下は好きなテーマによって変更する -->
<link rel="stylesheet" type="text/css" href="/js/SyntaxHighlighter/styles/shThemeDefault.css" />
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shAutoloader.js"></script>

<!-- 以下は装飾したい言語を追加 -->
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript">// <![CDATA[
   SyntaxHighlighter.all();
   // ]]></script>
<!--SyntaxHighlighter-->

意外にカンタン…。

その他、

を指定できるようです。

英語の説明ページですが、なんとなくでも理解できました。

なんかウレシイ。

SyntaxHighlighter以外の参考ページ

https://qiita.com/ko-he-8/items/b068e431f23b38608fb7 https://qiita.com/ko-he-8/items/b068e431f23b38608fb7