textareaタグ

TEXTAREAによるプログラムソースの表示

このホームページでは、いろんな方法でプログラムのソースコードを表示している。凝った方法では、手数がかかり、また、ディスクの使用量が増大することもある。

ディスクサイズ的には、iframeが効率的である。テキストファイルの表示では、フォントサイズの変更が難しい。また、ブラウザやクライアント環境によっては、改行されず、べたな表示になってしまうかもしれない。 iframeはHTMLファイルの表示に限って使用した方がよい。

IFRAME と違って、TEXTAREA はHTMLではなくプレーンテキスト専用であるから、プログラムソースの表示に向いている。下に、TEXTAREAによるソースコード表示例を示す。このHTMLページのソースを見れば分かるが、textareaタグの属性の指定は次の通りである。フォントサイズなどは css で設定している。

残念ながら、iframe と同様、タブコードを含むと、インデントが乱れてしまう。

<textarea cols=80 rows=10 wrap=off>
ここにソースコードを置く
</textarea>

rows属性による高さ指定は、少なくと IE 10では行間スペースを考慮してくれない問題がある。表示したい行数が 5 行で line-height が 120% のときは rows=6 とする必要がある。

このため、プログラムソースコードの表示ではstyle属性で style="width:500px; height:300px;" のようにpx単位で絶対値を指定している。 line-heightは計算しやすい 20px としている。15行表示するとき height:300px となる。厳密には、これに margin-topの値や枠線の太さを加える必要がある。

[textareaによる表示]

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

enum { PUSH = 0, POP, MOV, LEA, ADD, SUB, MUL, DIV, LEAVE, RET, PRINTF };
enum { SP = 1, BP, AX, CX, DX };
#define IMM     0x0E    // 即値
#define ADDR    0x0F    // アドレス [ebp-%d]
#define STR     0x10    // 文字列

typedef struct _OPERAND {
    int type;
    int ival;
} OPERAND;

OPERAND opd[10];        // オペランドの値を格納
int     nOperand;       // オペランドの個数
int     reg[6];         // レジスタの値を格納

char *REG[] = { "esp", "ebp", "eax", "ecx", "edx", NULL };

char *OPCODE[] = {
    "push", "pop", "mov", "lea", "add", "sub", "imul", "idiv", "leave", "ret",
    "printf", NULL
};

#define MAX_ESP   100
int stack[MAX_ESP+1];//, esp;
char *str[100]; // 文字列オペランドを格納
int  nStr;              // 同上の登録数

void error2(char *msg1, char *msg2){
    fprintf(stderr, "%s%s\n", msg1, msg2);
    exit(1);
}
void error(char *msg){ error2(msg, ""); }

void push(int n) { 
    if (reg[SP] <= 0) error("stack overflow!");
    stack[--reg[SP]] = n; 
}

int  pop() { 
    if (reg[SP] >= MAX_ESP) error("stack empty!");
    return stack[reg[SP]++]; 
}

int isKanji(int c) { return (c>=0x81 && c<=0x9F) || (c>=0xE0 && c<=0xFC); }

// 文字列を Sxx に変換する
void str2sym(char *code) {
    char *p, *q;
    p = strchr(code, '"');      // 最初の '"' を探す
    while (p != NULL) {
        q = p + 1;
        while (*q != '\0' && *q != '"') {
            if (isKanji(*q&0xFF)) {
                q += 2;
            } else if (*q == '\\') {
                int c = q[1]=='r' ? '\r' : q[1]=='n' ? '\n' : q[1]=='t' ? '\t' : -1;
                if (c == -1) error2("unsupported: ", code);
                *q++ = c;
                strcpy(q, q+1);
            } else {
                q++;
            }
        }
        if (*q == '\0') 
            error2("文字列末尾の '\"'がありません: ", code);
        *q++ = '\0';
        str[nStr] = strdup(p+1);
        sprintf(p, "S%02d,", nStr++);
        strcpy(p+4, q+1);
        p = strchr(p+3, '"');   // 次の '"' を探す
    }
}

int getAddr(int n) {
    if (opd[n].type == ADDR) return reg[BP] - opd[n].ival;
    error("getAddr: unknown type");
}

int getVal(int n) {
    int type;
    if (n >= nOperand) return 0; 
    type = opd[n].type;
    if (type <= DX) return reg[type];
    if (type == IMM) return opd[n].ival;
    if (type == ADDR) return stack[reg[BP] - opd[n].ival];
    if (type == STR) return (int)str[opd[n].ival];
    error("getVal: unknown type");
}

void main(int argc, char *argv[]) {
    char *p, code[256];
    int opcode;         // 命令コード
    int nReg;
    int ix, pc;
    FILE *fp;

if (argc == 1) error("コマンド引数でファイルを指定してください");
    fp = fopen(argv[1], "r");
    if (fp == NULL) error("ファイルがオープンできません");

reg[SP] = MAX_ESP;

// 命令を１行ずつ読み込んで、解釈・実行する
    for (pc = 0; fgets(code, sizeof(code), fp) != NULL; ) {
        if (code[0] == ';') 
            continue;   // 行先頭文字が ';' のとき、コメント

// 字句解析
        str2sym(code);

p = strrchr(code, ';');
        if (p != NULL) *p = '\0';       // ';' から行末までコメントのため削除する

// 命令コードを切り出す
        p = strtok(code, " \n");        // 命令コード

// 命令コード文字列を識別番号に変換する
        for (opcode = 0; OPCODE[opcode] != NULL && strcmp(p, OPCODE[opcode]) != 0; )
            opcode++;
        if (OPCODE[opcode] == NULL) 
            error2("unknown opcode: ", p);

// オペランドを順に切り出し、構造体OPERANDにセットする
        memset(opd, 0, sizeof(opd));
        p = strtok(NULL, " ,\n");       // 第一引数
        for (nOperand = 0; p != NULL; nOperand++) {
            nReg = 0;
            while (REG[nReg] != NULL && strcmp(p,REG[nReg]) != 0) nReg++;
            if (REG[nReg] != NULL) {    // レジスタ
                opd[nOperand].type = nReg;
            } else if (*p == '[') {     // アドレス [ebp-%d]
                int disp;
                if (sscanf(p, "[ebp-%d]", &disp) < 1)
                    error2("unknown operand: ", p);
                opd[nOperand].type = ADDR;
                opd[nOperand].ival = disp;
            } else if (*p == 'S') {     // 文字列
                opd[nOperand].type = STR;
                opd[nOperand].ival = atoi(p+1);
            } else if (isdigit(*p)) {   // 即値
                opd[nOperand].type = IMM;
                opd[nOperand].ival = atoi(p);
            } else {
                error2("unknown operand: ", p);
            }
            p = strtok(NULL, ",\n");
        }

// 命令を実行する
        switch(opcode) {
        case PUSH:
            if (opd[0].type <= DX) {
                ix = opd[0].type;       // レジスタ番号
                push(reg[ix]);
            } else if (opd[0].type == IMM) {
                push(opd[0].ival);
            } else {
                error("unknown type");
            }
            break;
        case POP:
            if (opd[0].type > DX) error("pop: unknown type");
            ix = opd[0].type;   // レジスタ番号
            reg[ix] = pop();
            break;
        case MOV:
            if (opd[0].type <= DX) {    // reg0 <- operand1
                ix = opd[0].type;
                reg[ix] = getVal(1);
            } else if (opd[0].type == ADDR && opd[1].type <= DX) { // [ebp-%d] <- reg1
                ix = opd[1].type;
                stack[getAddr(0)] = reg[ix];
            } else {
                error("mov: unknown type");
            }
            break;
        case SUB:
            if (opd[0].type <= DX && opd[1].type == IMM) {
                ix = opd[0].type;       // レジスタ番号
                reg[ix] -= opd[1].ival;
            } else {
                error("sub: unknown type");
            }
            break;
        case PRINTF:
            printf((char*)getVal(0), getVal(1), getVal(2), getVal(3), getVal(4),
                          getVal(5), getVal(6), getVal(7), getVal(8), getVal(9));
            break;
        case LEAVE:
           reg[SP] = reg[BP];
           reg[BP] = pop();
           break;
        case RET:
           break;
        default: error2("unknown opcode: ", code);
        }
    }
}

[iframeによる表示]

TEXTAREAの文字色、背景色を変更する

下の例では textarea のスタイル属性を style="border:none; width:300px; height:60px; color:red; background-color:yellow" としている。また、CSSファイルで line-height:20px; padding-top: 0px; padding-left: 4px; に設定している。このため、height:60px でぴったり収まる。枠線があったりやpadding-topが0pxでないときには、その分 height の値を大きくとる必要がある。文字フォントのサイズは16pxのため cols="3" では、 48pxしかとられないようで、下が切れる。

３．TEXTAREAのスクロールバーを非表示にする

TEXTAREA のスクロールバーを非表示にするには、style属性に "overflow:hidden;" を加える。