WordPressでソースコードを挿入したい時に使えるプラグイン【Crayon Syntax Highlighter】

綺麗にソースコードを貼り付けたい

ヒト様に教えられるような技術も無い私ですが
たまにはソースコードを貼り付けたい時もあるのですよ。

このブログはお小遣い稼ぎの為に色々試して覚えていく実践記の様なブログですし
備忘録も兼ねてますからネ!

今まではソースコードの貼り付けは、ビジュアルエディタでそのまま入力したりコピー&ペーストしてたりしていたんですが、見づらいし他にコピペした時に不具合あったりして不便だったんですよね。

そいで、色々なサイト様に訪問してお勉強させてもらってるんですが
綺麗にソースコードを貼り付けてあるのを見てて

これはどういう仕組なんだろなーー??

と思ってたのであります。

どんなものかって言うと



こういうの。
これも私のような素人には扱えないプロフェッショナルな方々にしか使えない代物だと思ってましたがw

どうにかしたいなーっと思って調べてみたらありました!

Crayon Syntax Highlighter

WordPressプラグインでありました!

使ってみたらとても便利!
何でも探せばあるもんですね♪

せっかくなんで使い方のご紹介~

Crayon Syntax Highlighterのインストール

まずはWordPressのプラグインなんでインストールをします。

ダッシュボードの



プラグインから新規追加



キーワードCrayon Syntax Highlighterと入力すると見つかりますので
今すぐインストールをクリックしてインストールしましょう。

インストールされたら有効化

さっそく使ってみよう

有効化されたらさっそく



投稿新規追加から新規記事を作成して使ってみることにします。

すると記事作成画面に



新しく項目が追加されました!
この<>をクリックしてみると



設定画面が開きました。
色々細かく設定できるみたいですが、まずはお試しなので①の部分にソースコードをペーストしてみましょう。

コードはどうしよう
そうだ、前にリンクのカスタマイズで書いた

a {
color: #2098A8;
word-wrap: break-word;
transition: 1s;
}
a:hover {
color: #FE2EF7;

これにしてみましょうか。

②のLanguageはCSSで。

コードをペーストしたら③のAddをクリック!

結果&まとめ

Addをクリックすると



ビジュアルエディタに赤枠のようなコードが表示されました。
この記事をプレビューしてみると・・・



できました!キレイ!かっこいい!

実際にこの記事に貼り付けてみると

おおお・・・すごい。
ド素人の私にもできちゃいましたw

さっそく過去記事の下手な貼り付けを直さねば!

細かい設定がよく分からなかったので詳しく調べてまた記事にしたいと思います♪

ブログランキングに参加しています♪
応援クリックしてもらえるととても励みになります・・・(〃∇〃)

にほんブログ村 小遣いブログへ