[JavaScript] プログラムコードを表示する為のツールを書いてみた

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

WordPressでは、プラグインで「crayon」とか他にもたくさんコード表示のツールがあるが、とりあえず、自作framework用として、作ってみることにしました。

要件定義

HTMLソース内で、プログラムソースを表示する際に、見やすくしたい。
行番号を表示したい。
ソースのコピペを便利にしたい。

ソースコード

使い方

1.JavaScriptタグを貼り付ける
2.ソースコードを表示させたい箇所を<pre>タグで囲む※既にPREタグの場合はそのままでOK
3.PREタグにname属性をつける EX)</pre><pre name=”code”>

これでHTMLを表示させると読み込み直後にpreタグを行数付きのコード表示にしてくれます。

GitHub

以下のURLにアップしておきました。
https://github.com/yugeta/codeView

issue

1.プログラムの行について、画面幅に応じて改行されます。
 改行なしモードは、構成を変える必要があるので、現時点ではできません。

2.syntax判定モードはありません。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です