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

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

体ぶっ壊して死にかけたので人生RESET中。
\ ポイント最大10倍! /

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

contents

Enlighter – Customizable Syntax Highlighter

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

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

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

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

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

sudo apt update

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

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をコピーしました!
contents