【Django】ダウンロードした「highlight.js」でコードにハイライトを設定する方法


前回、bootstrapで構築したサイトに、ソースコードをハイライト表記する手順をまとめました。

【Bootstrap】ソースコードをハイライト表記にする「highlight.js」の使い方

2020年7月7日

前回の設定では、外部のCDNと連携し、ソースコードのハイライトを表示する設定となっていましたが、今回はファイルをダウンロードし、構築したWebサイトにアップしてローカルで設定した手順を紹介します。


ダウンロードした「highlight.js」をDjangoで構築したWebサイトに設定する方法

Djangoで構築したWebサイトで設置するパッケージを以下のサイトからダウンロードします。
https://highlightjs.org/

今回、ダウンロードした「highlight.js」はDjangoでcssなどのファイルを読み込ませるためにsettings.pyで対象フォルダを指定しています。

私のWebサイトでは「static」フォルダ配下のファイルを読み込ませるようにしているので、「highlight.js」で取得したファイルを配置します。

設定の詳細は以下のページを参考にしてください。

【Django】Bootstrapのテンプレートを適用する方法

2020年5月24日

ダウンロードした「highlight.js」のファイルは、以下Djangoで構築したWebサイトの「static」フォルダ配下に設置しました。
※フォルダ名は「js」となります。

django/
|-- Dockerfile
|-- db-data
|-- docker-compose.yml
|-- manage.py
|-- myhp
|-- mysite
|-- requirements.txt
|-- ssl_certs
|-- static
|   |-- LICENSE
|   |-- css
|   |-- gulpfile.js
|   |-- index.html
|   |-- js
|   |-- package-lock.json
|   |-- package.json
|   `-- vendor
`-- templates
    |-- base.html
    `-- index.html

ダウンロードした「highlight.js」のファイルをDjangoで読み込む

上記で「static」フォルダ配下に、ダウンロードした「js」を設置しますが、Djangoで構築したサイトにファイルの居場所を指定しないとうまく読み込むことができません

そこで、ソースとなるHTMLファイルのヘッダー内に以下の設定を追記します。
「% static」で読込先の「static」フォルダを指定し、対象の「highlight.js」のスタイルシートを読み込ませます。

スタイルシートは「dracula.css」を使用した例となります。

<head>

------中略------

  <!-- highlight  -->
  <link rel="stylesheet" href="{% static '/js/highlight/styles/dracula.css' %}">
  <script src="{% static '/js/highlight/highlight.pack.js' %}"></script>
  <script>hljs.initHighlightingOnLoad();</script>

</head>

設定後、Webサイトにアクセスするとうまく反映されていることを確認できます。

「highlight.js」からダウンロードしたファイルを、DjangoのWebサイトで直接読み込む設定は以上となります。


関連記事


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUTこの記事をかいた人

blank

インターネット関連のSEをやっています。 ネットワーク、サーバー、ストレージ、仮想基盤まで幅広く手を出しており、MVNOの構築経験もあります。 現在は、Pythonを使ったプログラミングの開発をしネットワークの自動化ツールを作成しています! Pythonの入門書も作成しているので、ぜひ参考にしてください!