コードでブロックを着色

コードブロックの強調表示



構文の強調表示により、エディターでコードを読む方がはるかに便利であることは秘密ではありません。 したがって、サイトのページでこのようなハイライトを作成すると非常に便利です。 この記事では、この問題を簡単に解決できるライブラリーについて説明します。



まず、このようなライブラリの最小要件を定義します。



1)あなたの側で不必要なアクションのないコード強調表示、すなわち 理想的には、ハイライトをオンにする言語を指定し、コード自体でブロックを選択するだけです(通常はpre



タグを使用)。



2)コード行の番号付け(説明でこれらの番号を参照することは非常に便利であり、訪問者がナビゲートしやすくなります)。



現在、コードの強調表示を実行するライブラリはかなりあります。 しかし、仕事の原則によれば、私の意見では、 2つの主なタイプを区別できます。



1)構文の強調表示は、クライアント側で実行されます 。 ブラウザ



2)バックライトはサーバースクリプトによって実行されます



前者の場合、ブラウザはコードブロックが強調表示されておらず、 pre code



タグpre code



タグ(タグは異なる場合があります)およびJavaScript関数内にあるページを受け取ります。



ページが読み込まれると、js関数が実行され、これらのブロックのコンテンツの分析、コードの「色付け」、行の番号付けなどが行われます。



2番目のバージョンでは、コードブロックがサーバー側で分析され、バックライトがすぐに実行されます。 たとえば、元のページに次が含まれている場合:

  if ($tagcloud === FALSE) {
      
      







ブラウザは次のようになります:



  1. 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.











All Articles