コードの装飾


Syntax Highlighter
コードを見やすく色付きに装飾してHTMLで出力します。

コードの種類(言語・スクリプト・設定など)



出力コードの行番号表示:
テーブル表示  インライン表示  表示無し

コード入力:


出力:


スタイル変更(プレビュー表示中の変更可):
プレビュー:

説明


プログラムのコードなどをウェブに表示するのに文字の装飾を行うと見易くなりますが、最近のブログのシステムではその機能をJavascriptで実現している場合があります。この方法はページの作成者側からするととても簡単という利点がありますが、表示が遅いとかAMPページでその表現が失われる(ことがある)という問題があります。このページではコードをHTML+CSSで色付き装飾して出力するので表示速度が速くAMPでもその表現が維持されるという利点があります。CMSのシステムによっては、コードの装飾はプラグインの追加が必要ですがそれも不要です。ただし、ページの作成者にとってはコードの更新が手間になります。


行番号表示はブログなどでコードの解説をするにはあった方が何かと便利です。このツールではテーブル表示とインライン表示をサポートしていて、表示無しも選択できます。テーブル表示はコードをドラッグしてコピーすると行番号はコピーされないのでコードを修正せずに利用できる利点があります。ただし、コードの行末を折り返し表示すると行番号がズレて表示される欠点があります。
インライン表示は行番号がズレずに表示できる利点がありますが、コードをコピーすると各行頭に行番号が入った状態になるのでコードを利用するには修正の手間がかかる欠点があります。
コードを折り返し表示しないでテーブル表示がオススメです。


出力されたコードは、それだけを貼り付けても色は付きません。スタイルシートを利用して色を付けるので、以下から好みのスタイルシートをダウンロードして、それもページ表示に含まれるようにして下さい。


このツールは入力されたコードを処理して表示する機能しかありません。利用者の方が入力したコード、出力したコード、処理中のコードはサーバーには一切保存されません。また、サーバから外部に送信されたり第三者に渡されることもありません。


履歴

2019年02月09日
元のコードにHTMLで特殊文字として扱われる< > " &が含まれるとき、正しくエスケープ処理を行っていたにも関わらず表示時に特殊文字に戻っていたため、出力されたコードは再度手動でエスケープしなければならない状態になっていた。この問題の原因となっていた表示用Javascriptを修正した。

2019年01月15日
1stリリース。