![コードブロックの強調表示](https://habrastorage.org/getpro/habr/olpictures/762/718/dd9/762718dd9fc490a98d22e0a4f5867248.png)
構文の強調表示により、エディターでコードを読む方がはるかに便利であることは秘密ではありません。 したがって、サイトのページでこのようなハイライトを作成すると非常に便利です。 この記事では、この問題を簡単に解決できるライブラリーについて説明します。
まず、このようなライブラリの最小要件を定義します。
1)あなたの側で不必要なアクションのないコード強調表示、すなわち 理想的には、ハイライトをオンにする言語を指定し、コード自体でブロックを選択するだけです(通常は
pre
タグを使用)。
2)コード行の番号付け(説明でこれらの番号を参照することは非常に便利であり、訪問者がナビゲートしやすくなります)。
現在、コードの強調表示を実行するライブラリはかなりあります。 しかし、仕事の原則によれば、私の意見では、 2つの主なタイプを区別できます。
1)構文の強調表示は、クライアント側で実行されます 。 ブラウザ
2)バックライトはサーバースクリプトによって実行されます 。
前者の場合、ブラウザはコードブロックが強調表示されておらず、
pre code
タグ
pre code
タグ(タグは異なる場合があります)およびJavaScript関数内にあるページを受け取ります。
ページが読み込まれると、js関数が実行され、これらのブロックのコンテンツの分析、コードの「色付け」、行の番号付けなどが行われます。
2番目のバージョンでは、コードブロックがサーバー側で分析され、バックライトがすぐに実行されます。 たとえば、元のページに次が含まれている場合:
if ($tagcloud === FALSE) {
ブラウザは次のようになります:
-
if (
$tagcloud === FALSE
) {
if (
$tagcloud === FALSE
) {
ご注意 このブロックは特別にフォーマットしませんでした。
ご覧のとおり、ここでは各要素がタグ内にあります
, .
.
( JavaScript).
.
1) (, , ).
2) , (.. JavaScript ).
.
1) JavaScript . , , RSS .
2) js- - (.. ).
( ).
.
1) , RSS eMail (, ).
.
1) .
2) .
.
:
1) highlight.js
2) Code Press
3) Mike Samuel's JavaScript Code Prettifier
4) SyntaxHighlighter – WordPress,
, textarea.
5) Edit area
6) CodeMirror
7) Helene
:
1) GeSHi (, ) CMS
2) GNU Enscript WordPress - Syntax Highlighting with Enscript.
3) Highlight - WordPress.
WordPress, GeSHi
4) iG:Syntax Hiliter
5) CodeColorer
6) Highlight Source Pro
7) Code Snippet 2.0
8) Dean's Code Highlighter – .
9) WP-Syntax
. ( C++, Java, PHP, HTML), , , . - , . , GeSHi 70 ( :-) ).
, !
: - www.simplecoding.org.