ショートコードを使ってコードをハイライト(きれいに)表示させる機能と使い方

公開日:2020年8月31日 ha-Basicテーマ

【ha-Basic】テーマでは、投稿や固定ページ本文内へコードの紹介などを行う際、コードをショートコードで囲むことでハイライト表示させることができます。

バージョン3.0以降ではテーマカスタマイザーで機能を有効にしていただく必要があります(後述)

ショートコードは以下の通りです

[prismpre]
コードの内容
[/prismpre]

ブロックエディタの段落ブロック、クラシックブロック、カスタムhtmlブロックで動作します。

ショートコードでハイライト表示させる際の注意事項

本機能でコード表示させる場合には、コード中の文字列によっては、全角表示となったり、ご認識されて別の文字列になったりしてしまうことがありますので、それらを特殊文字へ変換する必要があります。

特殊文字への変換を含め、本機能を使ってコード表示させる場合は「HTML特殊文字変換ツール」(外部ツール)を使って変換されることをおすすめします。

また、きちんと表示されているか?コピーしたものを実際に貼り付けてきちんと動作するのか?など必ずご確認ください。

本機能は今後、開発・更新を進める予定がありませんので、将来的に使用できなくなる可能性があります(理由は後述)

バージョン3.0以降で本機能を使うには

【ha-Basic】バージョン3.0では以下の理由により、本機能をデフォルトでOFFにし、テーマカスタマイザー上で任意に有効にする仕組みへ変更しました。

  • 本機能を使われるサイトを運営する方が少ないと判断したため
  • 本機能を使わないサイトで余分なスクリプト、CSSの読み込みをしないようにするため

使われる場合には「外観」→「カスタマイズ」から「ha-Basic設定」→「エディタ設定」→「Prism.jsの使用」にチェックを入れてください。

本機能の開発・更新停止について

本機能はWordPressでブロックエディタが利用できる前のバージョン(~4.9)のテキスト・ビジュアルエディタにおいて、個人的にコードの表示がしにくかった(きれいに表示できなかった)のを解消するために入れていた機能になります。

しかしながら現在利用可能なブロックエディタでは、「コードブロック」を使用することで特殊文字変換を行うこともなくきちんとコードの記述・出力ができるようになったため、本機能は今後必要ではないと判断しました。

  •  白黒ハチワレ猫の【モモ】とのんびり暮らしながらフリーランスでサイト制作のお手伝いをしていますブログツールでありながら本格的なウェブサイトに必要な機能を追加できるWordpressの良さを活かした楽しく便利なサイト作りのお手伝いをさせていただいております

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。