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

contents

Amazon>>お得な最新のタイムセール情報はここ

7500万点の素材が無料

Wi-Fi6対応　最新5Gドコモホームルーター！

Enlighter – Customizable Syntax Highlighter

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

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

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

但し直下のような１行だけのコマンドなどを表記の場合表示に不具合が出る。

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

sudo apt update

回避方法としてはテーマカスタマイザーを使って以下のような１行用テーマを作成すれば大丈夫。

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を設定してます。

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

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

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の皆さんは是非つかってみましょう。