Menu/Prof
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。

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

Some visuals are licensed via Canva Pro (includes commercial rights).
Usage complies with Canva’s license terms at the time of use.
License policy: canva.com/policies/content-license-agreement

X
     この記事はプロモーションを含みます
contents

Enlighter – Customizable Syntax Highlighter

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

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

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

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

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

sudo apt update

回避方法としてはbootstrap4やbeyondなどのテーマを使って以下のような1行用テーマを作成すれば大丈夫。(上下に余白があるテーマ/例は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行コマンド用のカスタムテーマを作る

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

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の色やサイズ、バックグラウンド色の指定なので

お好みで良い。

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

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

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

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

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

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

シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

makotoのアバター makoto Blogger&YouTuber

サーバー管理者として17年ほど仕事でサーバー触ってました。
www,mail,dns,sql各鯖をすべてFreeBSDで運用してましたが現世ではかなりレアなタイプになるみたいですね笑

viやシェルスクリプトとかperlとかgccとかFreeBSDとか実はbashよりtcshが好きとか時々寝ぼけるのは
その名残でしょう。

今まで縁の下の力持ち的な他人のためにプログラムを書き他人のためにサーバー構築し他人のためにWEBサイトを創る的な世界から
自分の好きなことに集中できる環境は実に気持ち良いですね。
現役は引退済みなので難しいことはやりませんしやれません。

現在 ほぼ自由人。

contents