WordPressソースコードを綺麗に表示できるプラグイン

wordpressプラグイン使い方




LINEで送る
Share on LinkedIn
Pocket

WordPressプラグイン:ソースコードをエディタみたいに綺麗に表示させる方法

今回ご紹介するワードプレスプラグインCrayon Syntax Highlighterは記事の中でソースコードを綺麗に表示してくれます。

 

ワードプレスで <> を使ってコードの入力をして記事を書いて見てみると

横一列でひたすら長いコードが表示されます。。汗

これじゃ全然使えないなーと思って探していて見つけたプラグインとなります。

 

使い方はとても簡単です。

このプラグインを利用すると、ソースコードがエディタのように綺麗に表示できるので、

見栄えがとても良くなります。

サイトでHTMLやCSSなどプログラミングのコードを解説したりする機会の多い方は取り入れて活用されると読者の方にもきっと喜んでいただけることでしょう。

 

 

はじめに:対応言語

  1. ABAP
  2. ActionScript
  3. AmigaDOS
  4. Apache
  5. AppleScript
  6. Arduino
  7. Assembly (x86)
  8. AutoIt
  9. C
  10. C#
  11. C++
  12. CoffeeScript
  13. CSS
  14. Delphi/Pascal
  15. Diff
  16. Erlang
  17. Go
  18. Haskell
  19. HTML
  20. Lisp
  21. Lua
  22. Microsoft Registry
  23. MIVA Script
  24. Monkey
  25. MS-DOS
  26. MySQL
  27. Java
  28. JavaScript
  29. Objective-C
  30. Perl
  31. PHP
  32. PL/SQL
  33. PostgreSQL
  34. PowerShell
  35. Python
  36. R
  37. Ruby
  38. Rust
  39. Scheme
  40. Shell (Unix)
  41. Transact-SQL
  42. TeX
  43. Vim
  44. Visual Basic
  45. Visual Basic .NET
  46. YAML

 

 

1.Crayon Syntax Highlighterをインストール

管理画面>プラグイン>新規追加>Crayon Syntax Highlighterで検索しインストールします。

 

 

2.プラグインの設定

ワードプレス管理画面>設定>Crayon

このプラグインは日本語化されています。管理画面の説明も日本語です。

自分は初期設定のまま使っています。

 

 

3.ソースコードの挿入方法

プラグインをインストールすると、記事編集エディタに専用のボタンが追加されます。

そのボタンをクリックすると、挿入するソースコードの挿入画面が表示されます。

挿入画面で、挿入するソースコードの設定を行います。

右上にある挿入のリンクをクリックすると、記事編集エディタにコードが挿入されます。

 

 

まとめ

いかがでしたか。このプラグインを使うと後から自分で使う時もとても見やすく綺麗に使いやすくコードを表示させることができます。コードを綺麗に表示させたくなったら一度検討してみてください。最後までお読みいただきありがとうございます。

LINEで送る
Share on LinkedIn
Pocket

よく読まれている記事




wordpressプラグイン使い方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

嶋耕作

ライター、自主制作アニメも作ったりしている。自身が主催してきたイベント企画で培った集客運営等のノウハウを使ってサイトやYouTubeなどメディア運営のサポートを行っている。