JA

シンタックスハイライト

このシンタックスハイライトツールなら、何もインストールせずにソースコードを色付けできます。コードを貼り付け、言語と明るい配色か暗い配色を選んで、できあがったHTMLをコピーするだけです。色はHTMLの中に直接書き込まれるので、追加のスタイルシートなしで、ブログやメール、文書でそのまま正しく表示されます。

出典：WCAG 2.2 – Success Criterion 1.4.3 Contrast (Minimum): テキストは4.5:1(両テーマの色を検証済み)。更新日：

ソースコードを貼り付けてください。入力のたびにプレビューの色付けが更新されます。

入力したテキストはブラウザー内にとどまります。送信・保存されず、アドレスバーにも表示されません。

プレビュー

// あいさつを表示する
function greet(name) {
  const text = "こんにちは、" + name + "！";
  console.log(text);
  return text.length;
}

greet("世界");
マイツールボックス

結果

色付けしたHTML
<pre style="background:#ffffff;color:#1f2328;padding:12px 14px;border-radius:6px;overflow:auto;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;tab-size:4;margin:0"><code style="font:inherit"><span style="color:#57606a;font-style:italic">// あいさつを表示する</span> <span style="color:#cf222e">function</span> <span style="color:#8250df">greet</span>(name) { <span style="color:#cf222e">const</span> text = <span style="color:#0a3069">"こんにちは、"</span> + name + <span style="color:#0a3069">"！"</span>; console.<span style="color:#8250df">log</span>(text); <span style="color:#cf222e">return</span> text.length; } <span style="color:#8250df">greet</span>(<span style="color:#0a3069">"世界"</span>);</code></pre>
判別結果
JavaScript / TypeScript、8行、132文字
HTMLには色がstyle属性として入っているので、HTMLが使える場所ならどこにでも貼り付けられます。 判別はパターンにもとづく近似で、完全な構文解析ではありません。特殊な書き方では、一部の色が付かないことがあります。コードはブラウザー内だけで処理され、保存も送信もされません。

計算方法

シンタックスハイライトは、ソースコードの構成要素を色分けして見やすくする機能です。キーワード、文字列、数値、コメント、関数名にそれぞれ別の色を付けます。色分けのできるエディターがない文章、ドキュメント、メールの中でも、コードが読みやすくなります。

できること

安全で、中身は変わらない

ソースコードは書き換えず、区間に分けて色の指定で包むだけです。< や & などの文字は置き換えられるので、HTMLの断片を含むコードでもページの残りに影響しません。先にコードを整えたいときは、JSON整形ツール、SQL整形ツール、HTML整形ツールが使えます。

よくある質問

ブログ記事用にコードを色付けするには？

コードを貼り付け、言語と配色を選んで、結果欄のHTMLをコピーします。ブログのエディターにHTMLブロックとして挿入してください。色はコード内に入っているので、追加のスタイルシートは要りません。

色付けしたコードをWordやメールに貼り付けられますか？

たいていは、プレビューを選択してコピーし、貼り付ければ色が残ります。HTMLを受け付けないソフトでは、プレビューのスクリーンショットが使えます。

どの言語に対応していますか？

JavaScriptとTypeScript、JSON、スクリプトとスタイルを埋め込んだHTML、CSS、SQL、Python、Bashです。それ以外の言語は「プレーンテキスト」を選ぶと、ブロックの体裁だけが付きます。

コードは保存されたり送信されたりしますか？

いいえ。処理はブラウザー内で行われ、コードがアドレスバーに出ることも、保存されることもありません。

色が付かない部分があるのはなぜですか？

キーワード、文字列、コメントなどのパターンを認識していますが、完全な構文解析ではありません。特殊な書き方や言語の方言は、黒のままになることがあります。

出典・根拠

更新日： · 編集方針

関連ツール