私には才能がまったくありません。 私は知識に情熱を注いでいます

Article

最高のシンタックスハイライトJavascriptライブラリ

最高のシンタックスハイライトJavascriptライブラリ


November, 2 2021

最高のシンタックスハイライトJavascriptライブラリ

シンタックスハイライトは、プログラミング関連の問題についてブログを書いたり、ウェブサイトを作成したりしている人にとって非常に便利です。 これにより、サンプルコードをWebページに簡単かつ一貫して埋め込むことができます。 さらに、ライブラリが提供するテーマを通じて、より多くのユーザーの注目を集め、引き付けるのにも役立ちます。 それでは、2021年に最も一般的に使用されたJavascriptシンタックスハイライトライブラリを学びましょう!

Highlightjs

Highlightjsは、Javascriptで構築されたオープンソースライブラリであり、Webページでコードを強調表示するのに役立ち、ブラウザとサーバーの両方で実行できます。 このライブラリの長所のいくつかは、フレームワークに依存せず、Webページに埋め込んだ言語を自動的に検出する機能を備え、189以上の一般的なプログラミング言語をサポートし、コードスニペットに94以上のスタイルスタイルを提供することです。 ウェブページ。 このライブラリで私が気に入っているのは、ダウンロードプロセスで使用しないプログラミング言語を削除することで、Highlightjsのサイズを縮小できることです。 サーバー側では、yarnまたはnpmを使用してインストールできます。.

Highlightjs

Rainbow

Rainbowは、わずか約2.5kbのサイズの純粋なJavascriptで記述されたコンパクトなライブラリです。 HTMLページのコードを強調表示するオブジェクトにdata-language属性を呼び出すことで、これをWebページに簡単に適用できます。 さらに、Webサイトのより多様なスタイルを選択するのに役立つ20のCSSテーマを提供します。 Highlightjsと同様に、ブラウザとサーバーの両方で実行できます。

Rainbow

Prism

Prismは、わずか2KB(圧縮)のJavascriptファイルと1KB(圧縮)のCSSファイルを備えた軽量ライブラリです。 これは、smashingmagazine、reactjs、css-tricksなどの多くの主要なWebサイトで信頼され、使用されています。 このライブラリの長所のいくつかは、オブジェクトの属性とクラスを使用してHTML5タグと簡単に組み合わせることができることです。 最新のWeb標準に基づいて構築されており、ライブラリが提供するテーマのスタイルを簡単に設定できます。 Prismで気に入っているのは、各情報を事前に設計された形式で確認することで、使用する言語とテーマをダウンロードできることです(この部分については、[ダウンロードのカスタマイズ]で詳しく説明しています)。

Prism

SHJS

SHJSは、HTMLページでコードスニペットを簡単に強調表示できるようにするJavascriptで記述されたプログラムです。 今日の人気のあるプログラミング言語のほとんどをサポートし、より多くのテーマを提供するため、Webサイトに適切なスタイルを選択できます。 プロジェクトに適用するには、メインのSHJSスクリプト、使用するプログラミング言語を定義するファイル、最後にテーマ構文の強調表示を選択するためのCSSファイルの3つのメインファイルが必要です。 このようなファイル分割は、特定の言語をライブラリに追加するときに、プログラムを簡単に調整および拡張するのに役立ちます。 ただし、SHJSには、ブラウザでのみ実行できるという制限もあります。

SHJS

Microlightjs

Microlightjsは、Webページでのコードスニペットの可視性を向上させるのに役立つオープンソースライブラリです。 上記のライブラリとは少し異なり、プログラミング言語ごとにテーマを提供するのではなく、すべての言語に事前に設計されたテーマを提供します。 コードをWebサイトの他の部分から目立たせることを主な目的としています。 さらに、今日最も人気のあるブラウザでも動作し、IEバージョンはIE9 +以降です。

Microlightjs

SyntaxyJS

SyntaxyJSは、Webでコードを簡単に強調表示できるようにするライブラリです。 プログラミング言語のすべての構文に共通のテーマファイルを使用して、Webサイトのデザインに合わせてインターフェイスを簡単にカスタマイズできるようにします。 このライブラリについて私が気に入っているのは、Webサイトの使用中にエラーが発生した場合のセットアップ方法と解決方法について、詳細で完全な手順があることです。

SyntaxyJS

ハイライトコードをオンラインで作成するのに役立つツール

このセクションでは、強調表示するコードをコピーしてHTMLページの要素にコードをコンパイルすることにより、コードを強調表示するのに役立つツールについて説明します->言語を選択->目的のテーマを選択->コピー 処理後に返されたコード-> HTMLページに貼り付けます。 実際、これらのツールを使用すると、HTMLの<pre>、<code>の2つのメインタグを使用してコードのスタイルを自動的に設定できます。

ONLINE SYNTAX HIGHLIGHTERHighlight your source codeSyntax HighlighterOnline syntax highlighter like TextMateSource Code Highlighter

スニペットを強調する構文のいくつかの例

Syntax Highlight JS Library Demo

See the Pen Syntax Highlight JS Library Demo by 루세나 (Lucena) (@bisk8s) on CodePen.

Prism Syntax Highlighting

See the Pen Prism Syntax Highlighting by Tania Rascia (@taniarascia) on CodePen.

Pure CSS Code Editor

See the Pen Pure CSS Code Editor by Aysha Anggraini (@rrenula) on CodePen.

<pre> tag style (jquery)

See the Pen <pre> tag style (jquery) by romgerman (@romgerman) on CodePen.

Textarea Tabs + Syntax Highlighting

See the Pen Textarea Tabs + Syntax Highlighting by Ashley Ktorou (@aktorou) on CodePen.

一般性:

この記事が構文の強調表示を作成するためのライブラリとツールを提供することを願っています。 ..ご不明な点がございましたら、メールにてお問い合わせください。 間もなくご連絡いたします。