あなたのブログ柱でコードに構文ハイライトを加える方法

console.log("Hello World🙂")

あなたがそれがコードエディタのように彼らのコードをハイライトするウェブサイトを訪問したならば、あなたは疑問に思わなければなりません.どうやってやるの?
GitHub , CSS tricks , ブログ専用のプログラミングにもコードを強調することができます.
あなたは、彼らがすべてを包んでいると思っていなければなりません<span> タグや色のクラスやそのようなものを与える.
間違い❌
プログラマは怠惰だ.誰もその時間はない.
これらのことをするのにもっと簡単な方法がある.
あなたを図書館に紹介しますprism . それはこの特定の目的のために使用されます.

どうやって働くの
プリズムは、Webページの構文強調表示ライブラリです.他にもありますが、この1つは、簡単に把握し、簡単に始めることだと思う.
そして、CSSトリック.reactjs.org そして、他の多くのウェブサイトは、プリズムを使います.それで、それを使うのは確かに悪い考えでありません.
あなたはdocs それを行う方法を参照してください.しかし、あなたは必要としません.私は、ちょうど我々がそれをする方法をあなたに示します.経験から学ぶ😆😆😆
CSSとJSファイルだけです.ブートストラップのように.
まず第一に、彼らのウェブサイトからファイルをダウンロードしてくださいhttps://prismjs.com .
頭の中のCSSをリンク

<link rel="stylesheet" href="themes/prism.css">

JavaScriptの本体の下部

<script src="themes/prism.js">

おめでとう.今すぐあなたのコードで入力することができますし、それが強調表示されます.

ハウツーコード
それで、我々は少しのJavascriptを書く準備ができています.

<pre class="language-javascript">
  <code>
    function Hello() {
      console.log("Hello World🙂")
    }
  </code>
</pre>

そして、それはこのように見えます.

function Hello() {
  console.log("Hello World🙂")
}

参照それはそんなに難しくなかった.The <pre> タグは、左または右に整列するためにあなたがタイプしないタイプを作るためです.
例えば、<pre> タグ、このコードはこのようになります

function hello() {
console.log("Hello world🙂")
}

それはとてもきれいには見えない.それで、あなたは言うことができます<pre> タグはデフォルトを防ぎます.そして今我々はhello() 関数は、テキストエディタで書かれているように見えます.
また、この形式では、必要な言語のクラスを与えることを忘れないでください.

<pre class="language-css">

<pre class="language-java">

など
JSファイルをダウンロードした限り、お好みの任意の言語を使用することができます.
プリズムも色のテーマがあります.場合には、あなたのコードをオフにしたり、バックグラウンドでブレンドする必要はありません.私が言わなければならない美しい図書館です.
たぶん、それらをチェックアウトする必要がありますdocs . *ガス
ハッピーコーディング.
さえずりの上で私について来てください、そして、私がナイジェリアでコード化と私の人生についてつぶやきます.
あなたがこの記事が好きならば、あなたはdev . toにここで私に続くこともできます.
こんにちは.