• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Muromachi

日本人のためのGenesis子テーマ『Muromachi』

  • ホームHome
  • Muromachiの特徴About
  • Muromachiの使い方Manual
  • ダウンロードDownload
  • Genesisとは
  • Genesis子テーマ一覧
  • Genesisの使い方
  • Genesisカスタマイズ
  • Genesisプラグイン
  • Genesis WP Fan
HomeMuromachiの使い方シンタックスハイライトの設定方法
  • Muromachiの使い方

シンタックスハイライトの設定方法

Genesis WP Fan
2020年8月9日2020年8月9日

ここでは「シンタックスハイライト」と呼ばれるプログラムのソースコードに色付けする方法を紹介したいと思います。

記事の中にHTMLやCSS、PHPといったプログラムのコードを書いて説明する方にオススメの機能です。

↓ 使用例

<h1 class="site-title" itemprop="headline">
  <a href="https://muromachi.work/">Muromachi</a>
</h1>

目次

  • 1 シンタックスハイライトを有効にする
  • 2 シンタックスハイライトの使い方

シンタックスハイライトを有効にする

まずはカスタマイザーの記事詳細ページ設定に移動しましょう。

WordPress管理画面の「カスタマイズ」をクリックします。

設定項目が表示されるので、「記事詳細ページ設定」をクリックします。

「シンタックスハイライト」と書かれた項目があるので「有効」をクリックします。

シンタックスハイライトの使い方

シンタックスハイライトの機能を使うときは、マークダウンと呼ばれる記法を使うと簡単なので、ここではマークダウンを使ったソースコードのハイライト方法についてご紹介します。

マークダウン用のプラグインを導入

WordPressではいろいろなマークダウン用のプラグインがありますが、WP Githuber MD – WordPress Markdown Editorというプラグインがオススメです。

以前は「JP Markdown」というプラグインがあったのですが、グーテンベルクに対応していないという理由で推奨されなくなってしまいました。もしグーテンベルクを使わない方は、自己責任になりますが、JP Markdownを使うのも良いかもしれません。

ソースコードを「`」で挟む

ソースコードをハイライトするには、ソースコードを`3つと「language-プログラム名」で囲みます。

※ `はシフトキーを押しながら@ボタンで表示できます。

試しに次のHTMLコードをハイライトさせてみると、、

次のような表示になります。

<h1 class="site-title" itemprop="headline">
  <a href="https://muromachi.work/">Muromachi</a>
</h1>

上ではHTMLとして認識してほしいのでlanguage-htmlと書いています。CSSとして認識してほしいときにはlanguage-cssになります。

スポンサードリンク

demo
demo

PVランキング

  • 1
    2020年8月9日

    ショートコードで文字を左寄せ(中央寄せ・右寄せ)する方法

  • 2
    2013年1月11日

    マークアップ: HTML タグとフォーマット

  • 3
    No Image
    2012年1月8日

    テンプレート: ページ分け

  • 4
    2020年4月25日

    メニューの下に小さい文字で説明文を表示させる方法

  • 5
    2020年11月3日

    フッターのコピーライトを編集する方法

関連記事

  • 2020年8月3日

    星を使った評価用ショートコードの使い方

  • 2020年8月7日

    ショートコードでアイコンを表示する方法

  • 2020年8月8日

    ショートコードでいろいろな境界線を作る方法

  • 2020年8月8日

    キーボードのボタン風デザインをショートコードで作る方法

  • 2020年11月3日

    フッターのコピーライトを編集する方法

  • Muromachiの使い方
この記事を書いた人
Genesis WP Fan

WordPressテーマ『Muromachi』はGenesis WP Fanの中の人がGenesisフレームワークの子テーマとして制作しました。
※ この説明文は非表示にしたり、通常の投稿と同じようにHTMLを使用できます。







日本人のためのGenesisフレームワーク専用WordPressテーマ 『Muromachi』

SEOやセキュリティのプロから信頼されるGenesisフレームワークのメリットを生かしながら、日本人向けに見やすさや使いやすさ、機能性を追求しました。

Genesisサイトの制作ノウハウやウェブサイトの運営経験が詰まったWordPressテーマです。企業サイトはもちろん、ブログやアフィリエイトサイトなど、様々な用途にお使いいただけます。

ダウンロードする
← 前の記事
シンタックスハイライトの設定方法
ショートコードでBoxデザインを作る方法
次の記事 →
シンタックスハイライトの設定方法
フッターのコピーライトを編集する方法

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


最初のサイドバー

Genesis WP Fan

Genesis WP Fan

たいやき伝道師

WordPressテーマ『Muromachi』はGenesis WP Fanの中の人がGenesisフレームワークの子テーマとして制作しました。

Follow

サイト内検索

タグ

aside (1) Codex (2) css (5) html (3) jetpack (2) twitter (2) videopress (1) wordpress.tv (1) アライメント (2) カテゴリー (1) ギャラリー (2) コメント (3) コンテンツ (11) ショートコード (5) タイトル (3) タイル状 (1) タグ (1) チャット (1) テンプレート (11) トラックバック (1) パスワード (1) ピンバック (1) マークアップ (6) メディア (1) リンク (1) レイアウト (3) 一覧 (1) 動画 (2) 埋め込み (3) 字幕 (1) 引用 (1) 投稿 (1) 投稿フォーマット (15) 抜粋 (2) 改ページ (1) 書式化 (1) 極端な例 (8) 標準 (2) 母船 (1) 注目の画像 (3) 状態 (1) 画像 (7) 続きを読む (1) 読みやすさ (1)

アーカイブ

カテゴリー

  • Muromachiの使い方33
  • テンプレート10
  • マークアップ4
  • メディア1
  • 投稿フォーマット14
  • 極端な例5
  • 親カテゴリー1
    • 子カテゴリー 011
    • 子カテゴリー 031
      • 孫カテゴリー1

PVランキング

  • 1
    2020年8月9日

    ショートコードで文字を左寄せ(中央寄せ・右寄せ)する方法

  • 2
    2013年1月11日

    マークアップ: HTML タグとフォーマット

  • 3
    No Image
    2012年1月8日

    テンプレート: ページ分け

  • 4
    2020年4月25日

    メニューの下に小さい文字で説明文を表示させる方法

  • 5
    2020年11月3日

    フッターのコピーライトを編集する方法

最近の投稿

  • 2020年11月3日

    フッターのコピーライトを編集する方法

  • 2020年8月9日

    サイドバーのプロフィールをウィジェットで設定する方法

  • 2020年8月9日

    ショートコードで画像の横に吹き出しを追加する方法

  • 2020年8月9日

    ショートコードで文字を左寄せ(中央寄せ・右寄せ)する方法

  • 2020年8月9日

    参考リンクの紹介に便利なアクセント用ショートコードの使い方

  • 2020年8月9日

    記事編集時にショートカットキーでプレビューする方法

  • 2020年8月9日

    シンタックスハイライトの設定方法

  • 2020年8月9日

    サイトタイトルと説明文を中央寄せ(左寄せ)にする方法

  • 2020年8月8日

    ショートコードでBoxデザインを作る方法

  • 2020年8月8日

    ショートコードでボタンを作る方法

目次

  • 1 シンタックスハイライトを有効にする
  • 2 シンタックスハイライトの使い方
ページトップへ

Footer

Muromachi

日本人のためのGenesis Framework子テーマ - Muromachi

Genesis FrameworkのSEOの強さをそのままに、日本人にとっての使いやすさにこだわりました。

タグ一覧

Muromachiの使い方 テンプレート マークアップ メディア 子カテゴリー 01 子カテゴリー 03 孫カテゴリー 投稿フォーマット 極端な例 親カテゴリー

フッターメニュー

  • ホーム
  • Muromachiの特徴
  • Muromachiの使い方
  • ダウンロード

メタ情報

  • ログイン
  • 投稿フィード
  • コメントフィード
  • WordPress.org

カテゴリー

  • Muromachiの使い方33
  • テンプレート10
  • マークアップ4
  • メディア1
  • 投稿フォーマット14
  • 極端な例5
  • 親カテゴリー1
    • 子カテゴリー 011
    • 子カテゴリー 031
      • 孫カテゴリー1

Copyright © 2022
Muromachi
All Rights Reserved.