3テラバイト

プログラム関連備忘録サイト。主にゲーム。

WordPress

WordPress – ソースコードのシンタックスハイライトを行うSyntaxHighlighter Evolvedの使い方

投稿日:

こんにちは、今日はWordPressでソースコードのシンタックスハイライトが行えるSyntaxHighlighter Evolvedの使い方についてまとめていきます。

インストール方法

プラグイン > 新規追加 からSyntaxHighlighter Evolvedで検索

または公式サイトからダウンロードします。
https://ja.wordpress.org/plugins/syntaxhighlighter/

使用方法

プラグインを有効化すると、ショートコードやブロックエディタのブロックが使用できるようになります。

ショートコードの場合

以下のように[code]と[/code]の間に修飾したいソースコードを記述します。

languageにはコードのフォーマットを指定します。

[[code language="html"]
<html>
  <head>
  </head>
  <body>
  </body>
</html>
[/code]]

ブロックエディタの場合

フォーマット > SyntaxHighlighter コード からSyntaxHighlighterのブロックを追加、そのブロックにコードを記述することで表示できます。

設定できる項目は以下の通りです。

コード言語シンタックスハイライトのフォーマットを指定します。
行番号を表示行番号を表示します。
最初の行番号行番号が指定番号から始まります。
ハイライト行指定行をハイライトします。
URL をクリック可能にするコード内にURLがあった場合にクリック可能にします。
Enable edit mode on double clickダブルクリックで編集モードに移行するか

対応フォーマット一覧

対応言語等は以下の通りです。

ActionScript
BASH / Shell
C#
C / C++
Clojure
ColdFusion
CSS
Delphi
diff / patch
Erlang
F#
Groovy
HTML / XHTML / XML / XSLT
Java
JavaFX
JavaScript
LaTeX
MATLAB
Objective-C
Perl
PHP
PowerShell
Python
R
Ruby / Ruby on Rails
Scala
SQL
Visual Basic
YAML
プレーンテキスト

以下のページにも一覧が記載されています。
https://wordpress.com/support/wordpress-editor/blocks/syntax-highlighter-code-block/2/

表示例

以下に一部コードの表示例を記載します。

HTML

<html>
  <head>
  </head>
  <body>
  </body>
</html>

C / C++

#include <stdio.h>

int main() {
  printf("Hello World!");
}

-WordPress


comment

メールアドレスが公開されることはありません。

関連記事

no image

WordPress機能の高度なフィルターフック一覧

こんにちは、今日はWordPress機能の高度なフィルターフックについてまとめていきます。 確認環境 WordPress 5.5.3 フック一覧 フック名説明create_user_query新しいユ …

no image

WordPressのメディア関連フィルターフック一覧

こんにちは、今日はWordPressのメディア関連フィルターフックについてまとめていきます。 確認環境 WordPress 5.5.3 フィルターフック一覧 フック名説明editor_max_imag …

no image

WordPress – Cookieポリシー表示を行うプラグインGDPR Cookie Consentの使い方

こんにちは、今日はWordPressでCookieポリシー表示を追加することができるGDPR Cookie Consentの使い方についてまとめていきます。 インストール方法 プラグイン > 新 …

no image

WordPressでURLにクエリパラメータを付与する方法

こんにちは、今日はWordPressでURLにクエリパラメータを付与する方法についてまとめていきます。 確認環境 WordPress 5.5 クエリパラメータを付与する WordPressでURLにク …

no image

WordPressのWP_Query関連フィルターフック一覧

こんにちは、今日はWordPressのWP_Query関連フィルターフックについてまとめていきます。 確認環境 WordPress 5.5.3 フィルターフック一覧 フック名説明found_posts …