ソースコードを表示するプラグイン
プログラムのお勉強をしていると、WEBサイトを検索してサンプルソースを探すことが多々あります
■サンプルソースって見たことあります?
広告
そんな時に、サンプルソースを表示する方式がいくつかあるのですが、サンプルソースと他の記事の文章が分けられていると、見やすいですよねー!?
更に、強調表示されていたり、行数が表示されていると、説明文を読むのも(おそらく、書くのも)便利で読みやすいですよねー!?
この下にある、こういうやつねーw
#include <stdio.h> int main(int argc, char *args[]) { printf("Hello, world!\n"); return 0; }
というわけで!そのサンプルソースを見やすくしてくれる!そんなプラグインを紹介しましょ!
■Crayon Syntax Highlighter
それがこのー「Crayon Syntax Highlighter」です!
![ソースコードを表示するプラグイン 1 ソースコードを表示するプラグイン 1](https://zesys.net/blog/wp-content/uploads/2020/02/image-17.png)
ソースコードがこんな風に表示できます!見たことありますよね?(上のを画像にしただけwww)
![ソースコードを表示するプラグイン 2 ソースコードを表示するプラグイン 2](https://zesys.net/blog/wp-content/uploads/2020/02/image-18.png)
更にマウスカーソルをこのコードに持っていくと、こんな風にツールバーが表示されます!(上のやつにマウスカーソルあててみそ!)
![ソースコードを表示するプラグイン 3 ソースコードを表示するプラグイン 3](https://zesys.net/blog/wp-content/uploads/2020/02/image-19.png)
しかし、このプラグインは、WordPressの旧エディタにしか対応していないようですねー!?ビジュアルエディタでは、ブロックが出てこないです・・
広告
■ビジュアルエディタのソースコードブロック
ちなみに、ビジュアルエディタの通常のソースコードのブロックを使ってみると、こんな感じです
![ソースコードを表示するプラグイン 4 ソースコードを表示するプラグイン 4](https://zesys.net/blog/wp-content/uploads/2020/02/image-34.png)
![ソースコードを表示するプラグイン 5 ソースコードを表示するプラグイン 5](https://zesys.net/blog/wp-content/uploads/2020/02/image-20.png)
そして、 「Crayon Syntax Highlighter」 を有効化すると、上の通常のソースコードブロックの部分が、こんな風に変化しますが、 HTML表記が化けて しまっています
![ソースコードを表示するプラグイン 6 ソースコードを表示するプラグイン 6](https://zesys.net/blog/wp-content/uploads/2020/02/image-21.png)
![ソースコードを表示するプラグイン 7 ソースコードを表示するプラグイン 7](https://zesys.net/blog/wp-content/uploads/2020/02/image-22.png)
ソースのタイトルも表示できていないですし、やはり、 旧エディタ で書くしかなさそうですなー
でもー?旧エディタって???
広告