【3行のコードだけ】手軽にシンタックスハイライトを導入できる「highlight.js」の使い方

- Advertisement -クリブログ

テック系でブログを運営している人は、記事内にコードを記述するとき、何か味気ない感じがした経験はあると思う(プログラムの事を書く人)。

そんなとき、シンタックスハイライトを導入すれば、見栄えが良くなることをご存知だろうか。

*構文強調(英: syntax highlighting)とは、テキストエディタの機能であり、テキスト中の一部分をその分類ごとに異なる色やフォントで表示するものである。この機能により、プログラミング言語やマークアップ言語といった構造化された言語において、その構造や構文上のエラーが視覚的に区別しやすくなるため、ソースコードの記述が容易となる。(ウィキペディア

この記事では、一瞬でシンタックスハイライトをブログ(ウェブサイト)へ導入できる、「highlight.js」の使い方を解説している。CDNを介したコードを利用すれば、ヘッダーにコピーアンドペーストするだけで導入できてしまうため、非常に便利で簡単。

少しでもプログラムのことを記事で書く人は、導入を強くオススメしたい。

highlight.jsへアクセス

このURLからhighlight.jsへアクセスし、『Get version x.x.x』をクリックする。

highlight.js

この記事をコピーアンドペーストしてもらっても良いのだが、どうせなら最新版を利用した方が良いので、公式サイトへ訪れよう。

highlight.jsを取得

Get version x.x.x」をクリックし、指定されているhighlight.jsの「<link>」と「<script>」をコピーする。

highlight.js

導入方法を確認

Usage』をクリックすると、導入方法を確認できる。必要なのは、この3行だけだ。

highlight.js

導入

導入は、「<head></head>」内に指定のコードを入れるだけ。↓

<link rel="stylesheet" 
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

確認

これまで、何の味気もなかったコードブロック↓

highlight.js

highlight.js導入後のコードブロック↓

highlight.js

該当の記事はこちら↓

使用方法

使用方法は至って簡単。公式サイトでも書かれているように、コードを以下のタグで囲めば良い。

  • <pre><code>...</code></pre>

言語を指定したい場合は、classに言語名を追加してあげれば良い。

  • <pre><code class="python">...</code></pre>
  • <pre><code class="html">...</code></pre>
  • <pre><code class="css">...</code></pre>

WordPressでブログを運営している場合、プログラムのコードを『整形済み』でブロックの埋め込んだら、コードが記述されたブロックにある『』をクリックし、『HTMLとして編集』を選択する。

流れを整理しよう。

  1. 整形済み
  2. HTMLとして編集

<pre class="wp-block-preformatted">』となっている部分を、『<pre><code>...</code><pre>』というように変更してあげれば良い。

スタイルの変更

デフォルトのスタイルを変更したい場合、 highlight.jsがいくつかテーマを用意している。

このスタイルを採用するためには、CDN経由でなくウェブサイトが稼働しているサーバーかクラウドのオブジェクトストレージ経由でhighlight.jsを配信する必要がある。

WordPressとGoogle Cloud Storage(GCS)の記事はこちら↓

Get version x.x.x」をクリックした際、CDNの下部にあった「Custom package」から使用するプログラミング言語にチェックを入れ、ダウンロードする。

highlight.js
基本的なプログラミング言語はデフォルトでチェックされている。
highlight.js
必要なプログラミング言語を任意でチェックする。

ダウンロードすると、以下のようなファイルとフォルダが入っている。もちろん、このURLにあるGithubのリポジトリから、「クローン」あるいは「Zipをダウンロード」してもらっても良い。

highlight.js

スタイルを変更する際は、↓のデモを見て気に入ったものへ変更すれば良い。

highlight.js
Stylesをクリックしていくと、各言語でどのように表示されるかが確認できる。

各スタイルは、「styles」フォルダに格納されている。

highlight.js
上述したStylesの名前が、.cssファイルで記述されている。

筆者のブログは、カスタムスタイルのシンタックスハイライトを導入したコードが、以下のように表示された。適応したスタイルは、パッと見て気に入ったので『tomorrow-night-bright』としてみた。

highlight.js

上記のコードがある記事はこちら↓

適用方法

上述した、CDN経由で読み込まれていた↓のコードを


<link rel="stylesheet" 
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/default.min.css">

以下のようなPathに変更してあげるだけ。


<link rel="stylesheet" href="/css/styles/tomorrow-night-bright.css">

ダウンロードするフォルダと、適用させるスタイルは各々異なるはず。したがって、適切なものに変更して頂ければ良い。

デフォルトでは無味乾燥であったスタイルはテキストエディタのようなスタイルに変更されるのでテンションが少しあがるはずだ!

基本的に、Wordpressはプラグインを導入しないに限る。プラグインが増えるほど、脆弱性と管理コストが増すからだ。サクッと解決できるものは、「○○ without plugin」で検索する癖をつけていきたい。

Keisuke Kuribara
株式会社Propagation代表取締役。興味対象は、ビットコイン、大麻、ウェブ、金融、生物、心理など。金融から健康、テック、音楽など様々な事について執筆しており、このブログは月間10万PV程度となっております。自身のアウトプットや知的好奇心を満たすことが主な目的です。お仕事の依頼や相談などお気軽にお問い合わせください。
- Advertisement -
- Advertisement -

こちらもオススメ

ShopifyとOpenNodeが統合。Lightning Network決済を手軽に導入できるぞ

Bitcoin Magazineが伝える所によると、Shopifyで作られたオンラインストアはLightning Networkを使った決済を採用できるようになる。 世界最大級のEコマースプラットフォームであるShopifyは、50万以上のマーチャント向けて、OpenNodeによるビットコインのメインネットとLightning Networkを採用することとなった。 Shopify上でのビットコイン決済は、これまでもBitPayとCoinbase Commerceを通じて可能になっていたが、いずれもメインネットのみであり安価で高速なLightning Network決済は初めてとなる。

金利リスクの管理

金利リスクは、金利の変動により資産価値が変動する可能性があることで、ローンや債券などの利付資産に存在します。 金利リスクの管理は非常に重要になってきており、金利リスクに対処するために様々な手法が開発されています。 本記事では、企業と消費者の双方が様々なデリバティブ商品を用いて金利リスクを管理するいくつかの方法を考察します。 どのような投資家が金利リスクの影響を受けやすいか 金利リスクとは、金利の絶対水準が変動することにより発生するリスクです。

これだけは見ておこう。『30分で判る経済の仕組み』という動画は超良い無料教材だ

経済の仕組みというのは一見難解だ。 初めて見る単語ばかりで、何の本を読んでも分からない方も数多くいると思う。 だが、Youtubeに上がっている、ヘッジファンド創設者であるレイ・ダリオ氏の「30分で判る経済の仕組み」という動画は、イラストの動きに合わせ内容が端的に述べられているので非常に分かりやすい。 この動画を見たあとに、日経新聞やロイターなんかの記事を読むと、これまでとは違った味方ができると思う。

冬に多くのビタミンDが必要な理由

寒い真冬では、ビタミンD欠乏症や感染症のリスクが高まっていきます。 ビタミンDは、日光にさらされることで生成され、また、サバやイワシといった魚、キノコ、乳製品にも含まれており、健康に不可欠です。 人間は健康を維持し、感染症と闘うためにビタミンDを必要としています。 皮肉なことですが、人がビタミンDを最も必要とする冬に、我々は十分に摂取できていません。

【超簡単】パソコンからInstagramに写真を投稿する方法、2通り紹介!

一眼レフで撮影した写真やダウンロードした画像を、Instagram(インスタグラム)にPCから投稿する方法を紹介する。 今回紹介する方法は2つ。 それぞれ、 外部サービス(ツール)を使用して投稿する方法ツールは使用せずブラウザから投稿する方法

こちらの記事も読まれています

- Advertisement -