WordPress

Crayon Syntax Highlighter/ブログ記事内にソースコードを貼り付けるプラグイン

2018-07-30

CrayonSyntaxHighlighter2

ワードプレスのブログ記事内にソースコードを綺麗に貼り付け・埋め込みができるプラグイン

Crayon Syntax Highlighterの使い方と設定方法

 

ワードプレスのテーマによっては、デフォルトでソースコードが貼り付けできるテーマもあります。

しかし、それだとキレイではない!ブログのデザイン的にも素敵な貼り付けにならないです。困ったもんです…そんな時に使えるプラグインが、今回紹介するCrayon Syntax Highlighter

 

このプラグインを利用すると、あなたのサイトにあったデザインでソースコードを貼り付けする事が可能です。しかも、「ビジュアル」「テキスト」両方のエディタ対応!

 

ちなみにワードプレスでソースコードを貼り付けできるプラグインで、似たような名前のSyntax Highlighter Evolvedというプラグインもあります。

両方とも使った経験ですが、Syntax Highlighter Evolvedは重たいです。かなり重めですので、今回紹介するCrayon Syntax Highlighterの方が良さげです。

Crayon Syntax Highlighterの方が良さげの理由は、カスタマイズの充実性・重さ・動作が安定している、という点です。

 

ですので、この記事ではCrayon Syntax Highlighterの使い方と設定方法を説明していきます!

 

スポンサードサーチ

Crayon Syntax Highlighterのインストール

 

CrayonSyntaxHighlighter

こちらのプラグインです

ワードプレス管理画面から『プラグイン』で【Crayon Syntax Highlighter】を検索してください。

今すぐインストール』したら『有効化』しましょう!

 

 

プラグインの設定

CrayonSyntaxHighlighter3

プラグインを有効化したら、管理画面の『Crayon』から設定ができます。

詳細の設定が『Crayon』から出来ますがCrayon Syntax Highlighterは、初期状態のままでも運用可能です。

日本語での項目説明もあるので、ここから好みで変更してください!

 

テーマ


ソースコードのデザイン変更が出来ます。変更すると下のプレビューに表示されるので確認しながら選択してください!

 

フォント


フォントのデザインとサイズ・行間の設定項目

 

サイズ


ソースコードのサイズが選択可能

 

ツールバー


ツールバーの表示設定

 


ソースコードの行間設定

 

好みのカスタマイズが完了したら『変更を保存』をクリックして完了します。

特に初期設定のままでも問題ないので、実際に使用しながら変更してみて下さい!

 

 

記事内での使い方

投稿記事内の『テキストエディタ』に【Crayon】タグが追加されているので、クリックしてソースコードを貼り付けしていきます。

コード


貼り付けたいソースコードを入力(必須)

 

タイトル


ソースコードにタイトルを付ける事が可能(任意)

 

プログラム言語


表示させるコード種類を選択(任意)

 

マークするライン


選択した数字の行が色付けされます(任意)

 

各項目の入力と選択が終了したら、【挿入】をクリックして完了です。

エディタを「ビジュアル」に戻すか、プレビューから確認が可能です。確認しながらブログ記事を完成させてみて下さい!

一度完成したソースコードを編集したい場合は、再度投稿画面から編集して『更新』をクリックすると編集ができます!

 

 

Crayon Syntax Highlighterまとめ

ブログ記事内にソースコードを貼り付けできるプラグインは他にも沢山ありますが、Crayon Syntax Highlighterが1番キレイだし簡単です。ソースコード貼り付ける人って、ある程度のWeb技術者が多いと思いますが、初心者の方でもワードプレスに慣れてきたら是非とも試してみて下さい!

ソースコードがブログに貼ってあるだけで、技術者っぽいブログに仕上がりますよ~

ぜひぜひ~

 

 

急上昇の記事

トークライバー画像

アプリ

【マシェLIVE・トークアプリ】配信用ライバーで気軽にお小遣い稼ぎ!

【女性必見】 お小遣い稼ぎが出来ちゃう。マシェLIVEトークアプリをご紹介!   ライブ配信で、報酬ゲット! ってゆーアプリです。   使い方や、どんなアプリなのかを徹底解説してい ...

ライブアプリ

アプリ 比較・まとめ

【2020年】最新の稼げるライブ配信アプリはどれ?

2020年11月現在、コロナ禍の影響もあり、自宅にいながらお小遣い稼ぎが可能なライブ配信アプリが物凄い勢いで普及しています。お小遣い稼ぎや副業としてアプリに参加している『ライバー』増えている一方で、自 ...

ビゴライブロゴ

アプリ

【BIGO LIVE】ビゴライブとは?稼げるライブ配信アプリの使い方を徹底攻略!

2020/11/27    , ,

ライブ配信アプリの中でも 稼げるライブ配信優秀なアプリ使いやすい操作が簡単 などと評判の良い 【BIGO LIVE】(ビゴライブ)   最近とにかくビゴライブの噂を耳にするので、どんなライブ ...

ショッピファイの公式サイト

インターネット

最近噂のShopify(ショッピファイ)とは…?使い方から費用まで

最近話題の『Shopify(ショッピファイ)』   皆様ご存じですか?   名前は聞いた事があるけど、細かいことまで知っているって人はまだまだ少ないのではないでしょうか・・・ &n ...

イリアムのロゴ

アプリ

人気でハマる人が続出…?ライブ配信アプリの【IRIAM】イリアム

2020/12/2    ,

誰でもキャラクターになってライブ配信を行うコトができる   【IRIAM】イリアム   一般的なよくあるライブ配信アプリでは、ライブ配信者が自分の顔をスマートフォンにかざして、テレ ...

よく読まれている記事

-WordPress
-, ,

© 2021 wright BLOG