【WordPress】ソースコードを綺麗に表示する方法を紹介

ブログ制作

2023.01.18

エンジニア系の記事を書くようになって気づいたのですが、WordPressの標準のコードブロックだとソースコードがあまり綺麗に表示されないんですよね。

今回は「Highlighting Code Block」プラグインを紹介します。これを使うとWordPressで綺麗にソースコードを表示してくれます！

Highlighting Code Blockプラグインのインストール
ソースコードを綺麗に表示する
まとめ

Highlighting Code Blockプラグインのインストール

ダッシュボードで「プラグイン＞新規追加」でプラグイン追加画面を表示します。

検索窓に「Highlighting Code Block」と入力してプラグインを選択します。

「今すぐインストール」を押すとインストールされ、そのあと「有効化」を押すことでプラグインを有効にします。

ソースコードを綺麗に表示する

ブロックを追加するときの選択肢に、「Highlighting Code Block」がでてきます。これを選びます。

あとはソースコード、言語、必要に応じてファイル名を入力します。

以下のようにコードが綺麗に表示されます！

require "graphql/client"
require "graphql/client/http"

module OctopusGraphql
  # Configure GraphQL endpoint using the basic HTTP network adapter.
  HTTP = GraphQL::Client::HTTP.new("https://api.oejp-kraken.energy/v1/graphql/") do
    def headers(context)
      # Optionally set any HTTP headers
      {   "Authorization": ENV['OCTOPUS_TOKEN']}
    end
  end

  # Fetch latest schema on init, this will make a network request
  Schema = GraphQL::Client.load_schema(HTTP)

  Client = GraphQL::Client.new(schema: Schema, execute: HTTP)
end

ちなみに、data-lineは指定するとその行が強調されます。

require "graphql/client"
require "graphql/client/http"

module OctopusGraphql
  # Configure GraphQL endpoint using the basic HTTP network adapter.
  HTTP = GraphQL::Client::HTTP.new("https://api.oejp-kraken.energy/v1/graphql/") do
    def headers(context)
      # Optionally set any HTTP headers
      {   "Authorization": ENV['OCTOPUS_TOKEN']}
    end
  end

  # Fetch latest schema on init, this will make a network request
  Schema = GraphQL::Client.load_schema(HTTP)

  Client = GraphQL::Client.new(schema: Schema, execute: HTTP)
end

まとめ

この記事では、WordPressで綺麗にソースコードを表示する方法を紹介しました。

これで見やすい記事が書けますね！