記事内のコードにコピーボタンをつける方法 Enlighter

>>>Amazonのお得な最新の情報はここ

サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ

ドコモ home 5G「キャッシュバック15,000円」を進呈中！

Enlighter – Customizable Syntax Highlighter

読者さんにコピペしてもらいたい部分（例えば設定コマンドやソースコードそのもの）を

手軽に実現するのと コード種類別にハイライト表記を実現する非常に良くできたプラグインです。

表示の形式は色々テーマとして複数選択できます。

但し選ぶテーマによって(例はMonokai)直下のような１行だけのコマンドなどを表記の場合少し見にくい。

マウスホバーさせるかスマホならタップしてみてください。

sudo apt update

回避方法としてはbootstrap4やbeyondなどのテーマを使って以下のような１行用テーマを作成すれば大丈夫。（上下に余白があるテーマ/例はbeyond）

sudo apt update

不具合の出ないテーマは BeyondかBootstrap4あたりをベースにカスタマイズしたものになります。

カスタマイズや設定はこのあと説明します。

この2テーマはホバー時のアイコンや文字が正常な位置に表示されます。

以下はMonokaiテーマを使用して Cソースを通常表示

#include <stdio.h>
#include <stdlib.h>
#include <fcntl.h>
#include <string.h>

int main(int argc, char* argv[]){
FILE *fp;
char buf[1024], data[256], ARGV[256], *a,*b,*ptr;

    strcpy(data,"/home/vuser/logs/mako/access_log");
    puts("Content-Type: text/html\n");

    if ((fp=fopen(data,"r"))!=NULL){

        switch (argc) {
        	case 2:
				strncpy(ARGV,argv[1],strlen(argv[1])+1);
		
				if (strcmp(ARGV,"src")){ 
    	            while (fgets(buf,1024,fp)!=NULL){
						ptr = strstr(&buf[0],&ARGV[0]);
						if (ptr!=NULL){
			  				ptr = strstr(&buf[0],"dc.cgi");
			     			if (ptr==NULL){
                               printf("%s<br>",buf);
			     			}
						}
	            	}
				}else{
               	    while (fgets(buf,1024,fp)!=NULL){
                        ptr = strstr(&buf[0],"packet-workz");
                        if( ptr==NULL ){
			  				ptr = strstr(&buf[0],"dc.cgi");
			     			if (ptr==NULL){
			       				ptr = strstr(&buf[0],"\"-\"");
			       				if (ptr==NULL){
                                   printf("%s<br>",buf);
			       				}
			     			}
                        }
                    }
				}
	        break;
            default:
               while (fgets(buf,1024,fp)!=NULL){
                   printf("%s<br>",buf);
               }  
    	}

    }

fclose(fp);

}

実際の表示方法の設定の仕方

通常のcode表記の使用ならばブロックメニューからEnlighter Sourcecode を選択して

目的のコードを貼り付けて、使うテーマと言語を指定するだけなのでとても簡単に使えます。

以下はCソースでテーマはMonokaiを設定してます。

１行コマンド用のカスタムテーマを作る

1. WordPressサイドメニュー内 <>Enlighter の中の Appearanceを選択。
2. Theme Customizerを選択
3. 画面1番上タブメニューの Defaultsを押してデフォルトセッティングをする。
4. １行コマンド表記の実際の使用方法

WordPressサイドメニュー内Enlighter の中の Appearanceを選択。

ここは全般的な設定だがテーマカスタマイザーの使用宣言はここです。

以下の画像のようにセットする。 ここでTheme Customizer の使用宣言をする。

ついでに全般的な表示設定もしておこう

画像は2 space と Break Lineで設定しているが

オリジナルのソースリストがTAB4でインデントしてその表示を崩したくない場合

• Code indentation を space4 に設定
• Text overflow を Add scroollbar に設定

すると オリジナルのインデントが崩れずにモバイルでも表示可能です。

Theme Customizerを選択

画面1番上タブメニューのBase Themeを選択して bootstrap4 または beyond にセットして画面最下部の 変更保存 しておく。

画面1番上タブメニューの Defaultsを押してデフォルトセッティングをする。

とりあえず画像の通りでも良いがここは使用するFONTの色やサイズ、バックグラウンド色の指定なので

お好みで良い。

設定したら 必ず 画面最下部の 設定を保存 を忘れずに。

１行コマンド表記の実際の使用方法

コードをエディター上に挿入するところまでは同じでエディター画面の右側の

ソース種類とテーマ指定を画像の通りにすればOK

以上のように非常に手軽に 高機能なシンタックスハイライト＆コピペボタンが実現できるので

テック系のBloggerの皆さんは是非つかってみましょう。

あわせて読みたい

僕が現在使用しているプラグイン達は WordPress最新版 と SWELL最新版で動かしているプラグイン達 沢山あるねぇ 重たくなるからみんなはこんなに入れちゃダメだよとか言いながら 色々わかってくると16個くら…