開発系ブログにおいてスクリプトなどのコードを読みやすく表示する必要があるのですが、毎回コード整形を行うのは手間なので整形ツールを作りました。必要であれば自由にお使い下さい。ユーザの利用するブラウザ上で完結しているスクリプトなので生成した情報取得などは行いません。基本的にはどのブログ環境でも同様に利用可能であると思われます。


使用方法

事前にスタイル設定を行わないとコード表示が整形されませんので、コード整形用の追加CSSをコピーしてブログページ用のスタイルシートに貼り付けておきます。

  1. 整形したいソースコードやスクリプトやテキストを入力ボックスにセットして表示モードや言語などの整形フォーマットを選択します。
  2. 変換とプレビューボタンを押すことで整形結果がプレビュー表示されます。
  3. 期待通りの出力であれば変換結果をコピーしてブログページのHTMLコード上に貼り付けます。

整形フォーマット

整形フォーマットは数種類の組み合わせに対応しています。

  • 表示タイプ・・・行番号や言語の色分けに対応したPrism.js使用タイプとプレーンテキスト表示用のPrism未使用タイプの2種類です。
  • 言語・・・プレーンテキスト以外はPrism.jsを使用する言語タイプを選択します。
  • 行番号・・・Prism.jsを使用することで行番号を表示します。
  • コピー機能・・・コードを活用してもらえる様にコピーボタンを設置します。

コード整形ツール


整形したいプログラムコードや黒枠化したいテキストを入力

表示モード: 言語: 行番号: コピー機能:

リアルタイムプレビュー

※ブログでの表示にはスタイルシートに事前準備：追加CSSが必要です。

変換ボタンを押すとここにプレビューが表示されます


変換結果

ブログのHTMLモードやコード入力などに貼り付けます。



事前準備：コード整形用の追加CSS

黒枠表示やレイアウトを崩さないために、Bloggerの「テーマ」＞「カスタマイズ」＞「HTMLを編集」＞「CSSを追加」の欄（挿入場所は各テンプレートのCSS定義による）に、以下のスタイルを貼り付けてください。

他のブログでも同様の貼付けを行えば利用できます。