ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2019.10.02  最終更新日:2021.01.04

js / jQuery

サイト内にコードをキレイに表示させたい!highlight.jsの使い方

サイト内で、コードをきれいに表示させたい際にとても便利なjsプラグインです。

ソースをサイト内に表示させる方法は、色々あるのですが、その方法の1つとしてご紹介します!

色々な言語に対応していて、たくさんスタイルがあります(エディタのように色味を変更できます)。行数が出ない、コピーボタンがない、などの点もありますので、実際に使ってみてご自身のサイトに合うか試してみてください!

highlight.jsの使い方手順

①ファイルのダウンロード

https://highlightjs.org にアクセスして、highlight.jsをダウンロードする。

Get Version X.X.X ボタンを押して、ダウンロードできるページに遷移できます。

色々な言語に対応していて、デフォルトで以下の言語が使えるように選択されていますが、それ以外の言語も選択すると使えるようになるみたいです。

また、スタイルについても、以下のように色々とバリエーションがあります! (89 styles とサイト内に書いてあります!)

②必要なファイルをサーバーにアップロードする

・ dracula.min.css (自分が使用したいスタイルのcss)
・ highlight.pack.js

の2つのファイルを任意のフォルダにアップロードする。
※cssは、ご自身が好むスタイルのcssを選んで1つアップロードしてください。

③ファイルを読み込む

以下のように、ご自身のサイト内で、highlight.pack.js、と気に入ったスタイルのCSSを読み込みます。

※ファイルパスはご自身のサイトに合わせて変更してください。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/atom-one-dark.css">
<script src="<?php echo get_template_directory_uri(); ?>/js/highlight.pack.js"></script>

③JSにhighlight.pack.jsを動かすコードを書く

以下のコードをjsに書く。

先ほどのファイルの読み込みの下に書いても大丈夫です。

hljs.initHighlightingOnLoad();

サイト内でコードを表示させるには

以下のように、表示させたいコードを、preタグとcodeタグで囲みます。

<pre><code>
ここに表示したいコードを書く
</code></pre>

CSSのカスタマイズ

cssを追記してスタイルを調整し、ご自身のサイトに合わせて見た目を整えます。

このサイトでは、以下のようにcssを追記してスタイルを調整してあります。

.hljs {
 margin-bottom:20px;
 padding: 0 20px !important;
 line-height: 1.5;
}

.hljs p {
 line-height:1;
}

最新記事