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でユーザー一覧を取得する関数get_usersの使い方

こんにちは、今日はWordPressでユーザー一覧を取得することができる関数get_usersの使い方についてまとめていきます。 確認環境 WordPress 5.5.1 引数 キー説明blog_id …

no image

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

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

no image

WordPressサイトで各フォームをInvisible reCAPTCHAで保護するプラグインInvisible reCaptcha for WordPressの使い方

こんにちは、今日はWordPressサイトで各フォームをInvisible reCAPTCHAで保護することができるプラグイン、Invisible reCaptcha for WordPressの使い …

no image

WordPressで投稿一覧を取得する関数get_postsの使い方

こんにちは、今日はWordPressで投稿一覧を取得する関数、get_postsの使い方についてまとめていきます。 確認環境 WordPress 5.5.1 引数 キー説明attachment_id添 …

no image

WordPressデータベースのoptionsテーブルレコード一覧

こんにちは、今日はWordPressサイトのデータベースのoptionsテーブルに追加されるレコードについてまとめていきます。 確認環境 WordPress 5.5.1 レコード一覧 option_n …