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

no image

WordPressの登録、ログイン関連フィルターフック一覧

こんにちは、今日はWordPressの登録、ログイン関連のフィルターフックについてまとめていきます。 確認環境 WordPress 5.5.1 フック一覧 フック名説明authenticateユーザー …

no image

WordPress – サイトにTwitterのタイムラインを埋め込む

こんにちは、今日はWordPressサイトにTwitterのタイムラインを埋め込む方法についてまとめていきます。 確認環境 WordPress 5.3.4 Twitterのタイムラインを埋め込む方法 …

no image

WordPressで特定投稿タイプの投稿リストのカスタム列ごとに発生するアクションフックmanage_{$post_type}_posts_custom_columnの使い方

こんにちは、WordPressで特定投稿タイプの投稿リストのカスタム列ごとに発生するアクションフックmanage_{$post_type}_posts_custom_columnの使い方についてまとめ …

no image

WordPress管理画面にメタボックスを追加する方法

こんにちは、今日はWordPress管理画面にメタボックスを追加する方法についてまとめていきます。 確認環境 WordPress 5.5.1 追加方法 メタボックスの追加にはadd_meta_box関 …