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技術者が多いと思いますが、初心者の方でもワードプレスに慣れてきたら是非とも試してみて下さい!

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

ぜひぜひ~

 

 

急上昇の記事

マシェバラトークラーバー

アプリ

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

2018/11/20    , ,

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

リップスアプリ

アプリ

【LIPS】コスメ・メイク好き女子必見の無料アプリ(リップス)とは…?使い方を徹底調査。

2019/5/27    , ,

  LIPS(リップス)   コスメ・メイク好きが、こぞって利用している無料アプリ LIPS(リップス) 美容系で有名なYouTuber、TikToker、インスタグラマーなどの多 ...

cartuneapp4

アプリ

CARTUNE(カーチューン)車好きが集まるSNSアプリ

2018/12/1    

CARTUNE(カーチューン)   車好きな人が集まるSNSコミュニティアプリのCARTUNE(カーチューン)   今までにも車関連のアプリやSNSといった車好きが集まるコミュニテ ...

女性人気アプリ

アプリ

女性に人気の話題アプリをまとめて紹介 / これがトレンド

女性向けに人気のアプリを まとめて紹介!!   スポンサードサーチ ■ 美容系アプリ LIPS(リップス) コスメ・メイク好き女子に人気の 美容アプリです。   最近ではローラさん ...

ホンネアプリロゴ

アプリ

【HONNE(ホンネ)】匿名の悩み相談ができるヒマつぶし無料アプリの使い方

2018/12/25    , , ,

誰か悩みを聞いてぇー 誰でもイイから、かまちょー 相談にのってぇー そんな時にバッチリなアプリ【HONNE】     「みんなの本音、覗きみちゃう」がキャッチフレーズな完全ヒマつぶ ...

アプリ

【ARINE(アリネ)】女性のための美容まとめ無料アプリ。使い方から評判などを解説!

2018/12/3    

キレイになりたい。 可愛くなりたい。 オシャレになりたい。 美容が大好き。 すべての女性の為の、美容アプリ【ARINE(アリネ)】   美容に関する全般(ヘア・メイク・コスメ・ファッション・ ...

よく読まれている記事

-WordPress
-, ,

Copyright© wright BLOG , 2019 All Rights Reserved.