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


使用方法

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

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

整形フォーマット

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

  • 表示タイプ・・・行番号や言語の色分けに対応した「Prism.js使用」タイプ、「プレーンテキスト表示用の黒枠」タイプ、そして「白ベースに黒枠の説明枠」タイプの3種類です。
  • 言語・・・プレーンテキスト以外はPrism.jsを使用する言語タイプを選択します。
  • 行番号・・・Prism.jsを使用することで行番号を表示します。
  • コピー機能・・・コードを活用してもらえる様にコピーボタンを設置します。
  • 折り返す・・・１行の表示が長い場合、折り返して画面内に入れるかスクロールバーを表示するかを選択します。

Prism.js使用タイプの例：
// テストボタンの機能
const btn = document.querySelector('.submit-btn');
btn.addEventListener('click', () => {
  alert('ボタンがクリックされた');
});

プレーンテキスト黒枠タイプの例：
;***画面表示の設定***
[Display]
Width = 1024
Height = 768
Theme = dark

白ベースに黒枠タイプの例：
特徴について
・バッテリー：1回の充電で最大１週間の連続使用が可能
・内蔵カメラ：暗闇でも鮮明に撮れる赤外線ライト搭載

コード整形ツール


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

表示モード: 言語: 行番号: コピー機能: テキストの折り返し:

リアルタイムプレビュー

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

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


変換結果

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



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

黒枠表示やレイアウトを崩さないために、Bloggerの「テーマ」＞「カスタマイズ」＞「HTMLを編集」＞

Prism.js本体とcss、行番号プラグイン：prism-line-numbers.min.jsとcssの行をCSS定義グループの直前に貼り付けて、「CSSを追加」の欄（挿入場所は各テンプレートのCSS定義による）に、以下のコードフォーマット用黒枠スタイルを貼り付けてください。

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