神戸 大阪 宝塚 ホームぺージ制作会社

コードをきれいにハイライトできる【Highlighting Code Block】

2020/05/04

この記事の投稿者

カンスケ

 

こんにちは、ラフデザインのカンスケです!

 

プログラマーやエンジニアの方がWordPressで記事の投稿をする際、記事内にコードを掲載したい時があると思います。

しかしそのままコードを書いてみると…

 

</php

wp_nav_menu(

array(

'depth' => 1,

'theme_location' => 'drawer',

'container' => 'nav',

'container_class' => 'drawer-nav',

'menu_class' => 'drawer-list',
)

);

?>

 

これでは少し見づらい…。もっと見やすくきれいにしたい!

そこで、「Highlighting Code Block」というプラグインを使ってみると…

</php
wp_nav_menu(
array(
'depth' => 1,
'theme_location' => 'drawer',
'container' => 'nav',
'container_class' => 'drawer-nav',
'menu_class' => 'drawer-list',
)
);
?>

きれいですね!

テキストエディタで見るようなきれいなデザインになりました!

 

今回は、このようにコードをきれいにハイライトするWordPressプラグイン、「Highlighting Code Block」のご紹介です!

 

【Highlighting Code Block】とは

 

冒頭でご紹介した通り、「Highlighting Code Block」というプラグインを使えば記事内のコードをきれいにハイライトすることができます。

 

記事でコードを紹介したいプログラマーやエンジニアの皆さんにとって、非常にありがたいプラグインです。

 

プラグインのインストール方法

他のプラグインと変わりありません。

まずはプラグインの新規追加で、「Highlighting Code Block」と検索してください。

 

 

検索すると、画像のように表示されますので、インストールを実施し、有効化ボタンが出ればそのままボタンを押して有効化してください。

 

設定

特段設定は不要です。

インストール後そのまま使うことができますが、簡単なカスタムだけご紹介します。

 

インストール後にダッシュボード画面で「設定」を選択すると、「CODE BLOCK」という文字が追加されているので、クリック。

 

すると設定画面が表示されます。

気になる設定といえばこのあたりでしょうか。

①行数の表示設定

コード表示に行数を追加するかどうか。

②コードカラーリング

ハイライトの色味(僕はDarkで設定しました)

 

お好みでいじってみてください。

 

使い方【Classic Editor(クラシックエディター)編】

まずはクラシックエディタでの使い方です。

 

「Highlighting Code Block」をインストール後に投稿画面を見てみると、

「コードブロック」というドロップダウンリストが追加されています。

 

ドロップダウンをクリックすると、言語名がズラッと出てきますので、書きたい言語をクリックします。

今回はPHPを選択。

 

すると以下のような画面が出てくるので、

/* Your code... */

/* Your code... */」のところに冒頭のようなコードを入力してプレビューしてみると…

</php
wp_nav_menu(
array(
'depth' => 1,
'theme_location' => 'drawer',
'container' => 'nav',
'container_class' => 'drawer-nav',
'menu_class' => 'drawer-list',
)
);
?>

 

きれいにコードがハイライトされました!

 

使い方【Gutenberg(グーテンベルク)編】

続いてグーテンベルクでの使い方。

 

ブロックの追加(+ボタン)を押し、選択肢から「フォーマット」を選択。

 

フォーマットを選択すると、「Highlighting Code Block」が追加されているのでクリック。

 

すると以下のような画面が出てくるので、

 

①「- Lang Select -」で書きたい言語名を選択

②「Your Code」の部分にコードを書く

これだけで、グーテンベルクでもきれいにコードがハイライトされます!

 

おわり

 

今回は、コードをきれいにハイライトできる【Highlighting Code Block】というプラグインをご紹介しました!

 

ブログでのコード共有には、このようなプラグインを使うときれいに見せることができますので是非お試しください。

 

お気軽にお問い合わせください。

ラフデザインのサービス一覧

  • ホームページ制作新規サイト・リニューアル・Wordpressを利用したホームぺージ制作に関する業務を行います
  • ホームページ制作採用サイトや採用動画の制作などの、採用サポートは当社の強みの一つでです。
  • ホームページ制作ドメイン・サーバーの管理や、サイトの運用・更新方法などを幅広くサポートします。
  • ホームページ制作採用向けや会社のご紹介向けのなどの動画制作も承っております。
  • ホームページ制作検索結果で上位に表示するための的確なアドバイスとサポートを行います。
  • ホームページ制作GoogleやYahoo!などの広告やSNS運用支援など幅広くWebプロモーションを行っています。
  • ホームページ制作パンフレットやチラシなどの印刷物のデザインからご納品まで当社にお任せください。

アーカイブ

CONTACT
お問い合わせ

Webサイト制作・採用ツール制作・Webサイト運用サポート・動画制作

move_top