DESIGN Web design

ブログにソースコードを埋め込むプラグイン『Crayon Syntax Highlighter』

投稿日:2018年6月2日 更新日:

ブログにソースコードを埋め込むプラグイン『Crayon Syntax Highlighter』
スポンサードリンク

正直私ブログにソースコード殆ど書かない、どうもダイスケ(@desing_d)です (=ω=.)
仕事でホームページを作る機会が増えて来ているのですが、分からない時て調べるじゃないですか。
そのときふと思ったんですよね・・・『記事にソースコードてどうやって貼り付けてんの?』
当たり前ですけど、普通に書いたら普通にソースコードが表示されるじゃないですか。
そしたら、プラグインでありました。
簡単にWordPressでのブログ記事にソースコードを貼り付ける事が出来る様になるプラグイン。

『Crayon Syntax Highlighter』

今回はこのプラグインを紹介しようと思います。

スポンサーリンク

Crayon Syntax Highlighterインストールの仕方

このプラグインは、記事にソースコードを埋め込む事が出来る様になる
WordPressのプラグインです。
普通にブログを運営するだけの方は必要ないですが、技術ブログなどでソースコードを表示させたい時などに使います。
早速、インストールしていきましょう。

Crayon Syntax Highlighterインストールの仕方

ここからインストールしてね!

新規追加 ⇨  プラグインの検索 Crayon Syntax Highlighter』で検索!
表示されたら、インストール   有効化でアクティブ化してください。
これで、インストールは完了です。

Crayon Syntax Highlighter設定

設定は特に必要なく、デフォルトのまま使用する事が可能です。
一応設定場所は・・・

Crayon Syntax Highlighter設定

設定 ⇨  Crayon で設定画面を開く事ができます。
ただ、Crayon Syntax Highlighterの翻訳ファイルが正常に機能していなく、英語表記の場合はWordPress神推しブログのネタワンさんの記事で消去するファイルがありましたので、このファイルを消去してください。
そしたら、日本語表記になります。

削除するファイル

/wp-content/languages/plugins/crayon-syntax-highlighter-ja.mo
/wp-content/languages/plugins/crayon-syntax-highlighter-ja.po

 出典:Crayon Syntax Highlighter – 記事の中でソースコードを綺麗に表示できるWordPressプラグイン - WordPress神推しブログのネタワン

めんどくさいから、英語表記のままでいいや!という方の為に一応日本語の設定画面あげておきますね!
Crayon Syntax Highlighter設定 その1 Crayon Syntax Highlighter設定 その2 Crayon Syntax Highlighter設定 その3 Crayon Syntax Highlighter設定 その4

設定は終了です(なんもしていない!!( *'ω'* ))

WordPressのブログ記事にソースコードを埋め込む

WordPressのブログ記事にソースコードを埋め込む その1

新規記事の投稿で、テキストエディターの欄にCrayonというタブが増えています、それをクリックしてください。

WordPressのブログ記事にソースコードを埋め込む その2

この様な、周り真っ暗のウィンドウが表示されます。
コードの所に貼り付けしたいソースコードを記入していきます。

WordPressのブログ記事にソースコードを埋め込む その3

こんな感じに入れてみました。
良ければ、右上の挿入をクリックしてソースコードを埋め込みます。

この様な、表示になりました。成功です!

スポンサーリンク

wordpressにソースコードを埋め込む事が出来るプラグインまとめ

wordpressにソースコードを埋め込む事が出来るプラグインまとめ

いかがでしたでしょうか?
正直私は、他人にソースコードを表示して教えるほど技術がまだありませんので、使う時は少なそうですが
どうやってやるんだろ?という、疑問が出て来て調べたのでメモ代わりに記事にしました。
思いついたソースコードをブログ記事でパチパチ打ち込んで記事にできたらカッコイイですよね!憧れます!
それを目指して少しずつ勉強あるのみです!

読んでいただいて、ありがとうございました。
それではノシ

 

スポンサーリンク

-DESIGN, Web design
-, , , ,

Copyright© Dデザイング , 2019 All Rights Reserved.