【WordPress】ソースコードを挿入できる「Crayon Syntax Highlighter」の始め方を解説!

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「「Crayon Syntax Highlighter」の始め方」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・WordPressの記事内に「ソースコード」を挿入したい方
・「Crayon Syntax Highlighter」の始め方・手順を知りたい方
・WordPress初心者

「Crayon Syntax Highlighter」を追加してみよう!

ダッシュボード」>「プラグイン」>「新規追加」をクリックして、「Crayon Syntax Highlighter」を追加していきましょう!

 

↓WordPressのプラグインの追加方法がわからない方はコチラも一緒にご覧ください!

【WordPress】「プラグイン」の追加方法・手順をわかりやすく解説!【ブログ】
みなさんこんにちは!おさかなです! 今回は「【WordPress】「プラグイン」の追加方法」について、書いていこうと思います! それでは、レッツゴー!!!!! 想定読者 ・WordPress初心者の方 ・「プラグイン」の使...

実際につかってみよう!

それでは、実際に記事内に「ソースコード」を挿入していきましょう~!

ダッシュボード」>「投稿」>「新規追加」をクリックして、記事の編集画面へ移動します!

メニューにこのような「<>」マークが表示されていると思うので、そこをクリックします…!

すると、このような画面が表示されるのが確認できると思います!

ここに挿入したい「ソースコード」を入力します。

おさかな
おさかな

直接編集するよりも、エディタからコードを「コピぺ」した方が、簡単に挿入できるよ!

そしたら、「add」(日本語版の場合は「挿入」)というボタンをクリックして、記事内に追加していきます…!

先ほどのページをスクロールすると「テーマ」や「フォント」、「サイズ」などの細かい設定をカスタマイズすることもできます…!

 

↓実際に「ソースコード」を挿入したのがコチラ!

Classic」テーマを適用中!

document.getElementById('btn').addEventListener('click', () => {
	alert('GOOD!');
});

こんな感じで、テーマを変更することもできます!

おさかな
おさかな
Cisco Router」というテーマを利用しているよ!
document.getElementById('btn').addEventListener('click', () => {
	alert('GOOD!');
});

 

こんな感じで、簡単にソースコードを挿入することができました!

カスタマイズもできるので、自分のサイトのイメージに合わせてどんどん使ってみてください…!

おつかれさまでした🍎

感想・まとめ

今回は「「Crayon Syntax Highlighter」の始め方」について、書いていきました…!

いかがだったでしょうか?

使い慣れてくると活躍する場面がたくさん出てくるので、かなりオススメのプラグインです!(おさかなも愛用しています!)

「プログラミングで勉強したことをブログにしたい!」という方や「ソースコードをブログに載せたい」という方などは、この「Crayon Syntax Highlighter」をぜひ活用してみてください!

おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

タイトルとURLをコピーしました