コードSyntaxハイライト表示を[TIL]マイサイトに適用

5393 ワード
テキストリンク
ニュースセンターや人気のあるブログサイトなどを見ると、文法をダウンロードしてコードラベルに異なる言語のハイライト機能を追加することができます.ブザーも以下のように使用できます.
<body>
	<div>
		Hello, world!
	</div>
</body>
でも私のサイトは?基本的に設定された<code>のラベルを使用すると、フォントの色だけでなく背景の色も見えません.私が作成したサイトにも、上のような素晴らしいハイライト機能を追加しましょう.
でも.直接実現するには長い時間がかかります.希望に満ちているのは、すでに多くの優秀な人が非常に良いツールを創造していることです!
highlight.js式 highlight.jsというライブラリです.これは、任意のWeb上でcode syntax highlight機能を使用するのに役立つツールです.
詳細な使用方法は、羽状草本植物によって学習することができる.ここでは私がどのように使っているのか簡単に述べます.
  • index.htmlファイルに次の構文を追加します.
    <link
  rel="stylesheet"
  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/${테마 이름}.min.css"
/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
<script>
  hljs.highlightAll();
</script>
    これによりハイライト表示されます.jsのスクリプトとcssを外部から受信します.
    希望するテーマ名は数式スロットで確認できます.使用したいトピックがGithub Dark Dimmedの場合は、スペース(-)、大文字を小文字(github-dark-dimmed)に変換して入力できます.
    例)
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/github.dark-dimmed.min.css"/>

  • プロジェクト内で使用します.
    ...
<pre><code class="language-언어이름">{내용}</code></pre>
...
  • Reactで使用したい場合は、npmパッケージ(npm install highlight.js)で受信し、Effectを使用してページ上でhljs.highlightAll()を実行できます.

  • 完了!

    • CORS
    [白俊/c+]2428号:箸