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 フィルターフック一覧 フック名説明add_linkdelete …

no image

WordPressで管理画面に通知を表示するアクションフックadmin_noticesの使い方

こんにちは、今日はWordPressで管理画面に通知を表示するアクションフック、admin_noticesの使い方についてまとめていきます。 使い方 以下のようなコードをfunctions.php等に …

no image

WordPressで投稿の更新時に表示されるメッセージのフィルターフックpost_updated_messagesの使い方

こんにちは、今日はWordPressで投稿の更新時に表示されるメッセージのフィルターフック、post_updated_messagesの使い方についてまとめていきます。 確認環境 使い方 以下の公式マ …

no image

WordPressでSSL接続か確認する関数is_sslの使い方

こんにちは、今日はWordPressでSSL接続か確認する関数is_sslの使い方についてまとめていきます。 確認環境 WordPress 5.5.1 使い方 引数は無く、SSL接続かどうかをtrue …

no image

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

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