わいWordPressに標準で付いているコード表示機能が使い勝手が良くないんだけど、おすすめのコード表示プラグインってないのかな？
なんて思ったことはありませんか？
プログラマーかつブロガーでないと思いませんかねw
実はボク自身、今回紹介するプラグインの存在を知るまでは
ブロックエディターにある「コード」というブロックを使っていました。
h2 {
color: #333
text-align: center;
}もちろん、コードを表示するという機能は果たせていますが、なんていうかちょっとイケてない。。
しかもTabキーがインデントに設定されていないので、自分でスペースキーで頑張ってインデントしないといけないなど、エンジニアやプログラマーが当たり前にしていることができなくて
わいちょっと、使いずらいな。。
と思っていました。
そんな中、今回紹介する「Code Block Pro」というプラグインを見つけました。
Code Block Proを利用すれば、さっきのコードも
h2 {
color: #333;
text-align: center;
}このように、オシャレに書くことができますし、視認性が良くなって見やすくなります。
Code Block Proの特徴
Code Block Proの特徴は、以下の通りです。
見た目がオシャレでかっこいい
1つ目に、「見た目がオシャレでかっこいい」です。
VSCodeのような見た目をしているので、普段から利用している人にとっては
かっこいいだけでなく親しみがあるデザインになっています。
しかも、ダーク背景なので厨二病的なデザインが好きな人にとっては好みなのではないでしょうか？w
打ち間違いやエラーがないかが一目で分かる
Code Block Proでは、VSCodeなどのエディタと同様にタグ名やプロパティを正しく書き込むとテキストの色が変わる使用なので
打ち間違いやエラーがあったらすぐに分かります。
つまり、テキスト色が白色から水色や薄い緑に変わっている時点で
わいこの部分は、打ち間違いやエラーになっている可能性が低いな！
ということが一瞬で分かります。
VSCodeで作成したファイルをローカル環境に反映させた場合やResult画面で内容を表示させるCodePenなどとは違って、画面上で実際にエラーが起こってしまうわけでないですが
ブログなどで使用する際は、ユーザーに間違った情報を与えるのはできるだけ避けたいので色が変化する仕様はありがたいですね！
Code Block Proの使い方
ここからは、Code Block Proのインストール方法と、実際の使い方について解説していきます。
プラグインの名称にProと記載されていますが、今回紹介する機能はどれも無料で利用することができます。
「プラグインを追加」からインストール・有効化
インストールするには、他のプラグインと同様で
既にインストールしているプラグインの画面から「プラグインを追加」を選択し、「Code Block Pro」と検索します。
下のプラグインをインストールし、有効化してください。
ブロックエディターを利用して使用できる
有効化できたら、投稿ページや固定ページなどにいき、ブロックエディタの「+」ボタンを押すか、「/」を押してからCode Block Proと検索します。
Code Block Proを選択したら、下のエディタのような画面が出ますので、後は中にコードを打ち込むだけです。
試しに、各言語によるコードを入力してみるとこのように反映されます。
HTMLはこんな感じ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ellipse"></div>
</body>
</html>CSSはこんな感じ。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.ellipse {
width: 100%;
height: 300px;
background: gray;
clip-path: ellipse(50px 70px at 5% 30%);
}JavaScriptはこんな感じ。
const modal = document.querySelector('.modal');
document.querySelector('.container').addEventListener('scroll', function() {
modal.classList.add('active');
});
document.querySelector('.close').addEventListener('click', function() {
modal.classList.remove('active');
});
document.querySelector('.modal').addEventListener('click', function(event) {
if(!event.target.closest('.modal_inner')) {
modal.classList.remove('active');
}
});PHPはこんな感じ。
<?php if(have_posts()): ?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li>繰り返し処理する内容</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>記事が見つかりません</p>
<?php endif; ?>Code Block Proでできること
行番号を表示させることができる
Code Block Proはインストールした直後のデフォルト状態だと行番号が表示されていません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ellipse"></div>
</body>
</html>これでは「上のコードの〇行目の〜」と説明をしたい時に、行番号を指定できません。
Code Block Proで行番号を表示させたい時は
対象の表示を選択してから、「ブロック」にある「Line Settings」をクリックし
「Line Numbers」にチェックを入れれば、きちんと表示されるはずです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ellipse"></div>
</body>
</html>言語を切り替えることができる
逆に、記述をした言語と異なる言語を選択している場合は
正しい記述をした際に色が変わる仕様にならないので、コードの書き間違いなどに気付けない可能性があります。
例えば、先ほど表示したHTMLを、言語の設定をCSSで表示してみると
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ellipse"></div>
</body>
</html>このように表示されます。
この状態でも使用はでき機能的には問題ないですが、
特に、VSCodeに慣れている人だと違和感が出てきて言語設定をきちんと揃えたくなると思いますw
言語を切り替えるには、対象の表示を選択してから「ブロック」にある「Language」をクリック。
CODE LAUNGUAGEを該当言語に切り替えましょう。
JavaやPython、CやC++などの言語も選択することができます。
テーマが選べる
Code Block Proでは、「Theme」という項目からエディターのテーマも選択することができます。
VSCodeの仕様や、ダークモードが好きな人などは
「DARK PLUS」を選択すると良いでしょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ellipse"></div>
</body>
</html>逆に、ライトモードが好きな人などは
「GITHUB LIGHT」などを選択すると良いと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ellipse"></div>
</body>
</html>ただし、白いテーマを選択すると上のように背景と一体化してしまいますし
ボクはVSCode推しなので「DARK PLUS」などの黒い背景のテーマをお勧めします。
テーマも結構数があるので、好きなものを使用してみてください！
まとめ
では、まとめです。
- Code Block Proは、VSCodeのような見た目のコード表示用プラグイン
- 見た目がオシャレでかっこいいだけでなくインデントも打て、打ち間違いやエラー防止のためのテキスト色が変化する仕様付き
- 行番号を表示する場合は、「Line Settings」から「Line Numbers」にチェックを入れる
使い勝手もいいので、ぜひCode Block Proをインストールして使ってみてくださいね。
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれません！
コメント