So-net無料ブログ作成

So-netブログのリッチテキストエディタでソースコードを書く方法 [雑談]

So-netブログのリッチテキストエディタを利用する状態で、ソースコードを書く方法。
以前は、うまく動作しなかった記憶があるんだけど、使えるようになっていたので。


設定画面で、リッチテキストエディタを「利用する」に設定してあることが前提。
ソースコードをコピペする。
リッチテキストエディタのソースコード画面を開き、pre タグなどを入力する。

set02.png


ひと手間がかかる感じがスッキリしないけど、とりあえず使えます。


ちなみに、リッチテキストエディタを使わない状態でソースコードを書く方法は、こちらの記事



私の場合、Syntax Highlighter とかめんどくさいし、見にくくなるので、css の pre タグを直して使っています。

[デザイン]-[テンプレート管理]の中から、現在使っているテンプレートの[編集]をクリック。 css が編集できるようになるので、pre タグの書式を追加。

/*-----Common-----*/
pre {
padding:10px;
color:#fff;
background-color:#666;
line-height:1.5em;
}

こんな感じの書式にしてあります。



nice!(1)  コメント(0) 
共通テーマ:パソコン・インターネット

textarea の行数をリアルタイムに数える [JavaScript]

textarea の行数を、リアルタイムに数える javascript です。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで行数を数える</title>

<script type="text/javascript"><!--
function CountLine( id, str ) {
    num = str.match(/\r\n|\n/g);
    if(num!=null){
        line = num.length +1;
    }else{
        line = 1;
    }
    document.getElementById(id).innerHTML = "行数:" + line + "行";
}// --></script>
</head>

<body>
<textarea name="text1" rows="10" cols="30" onkeyup="CountLine('input1', value);">
</textarea>

<p id="input1">行数:1行</p>
</body></html>

javascript で、CountLine( id, str ) という関数を作り、textarea の onkeyup で呼び出します。
CountLine( id, str ) では、str.match() で改行コードかどうかチェックしています。

改行コードがあった場合は、0からカウントされるので、1を足します。
改行コードがなかった場合は、初期値の1を入れます。
表示文字列を作って、id="input1" の文字列を書き換えます。

pタグの 「行数:1行」 は、初期値です。textarea は、画面に表示した段階で1行目が表示されているので、0行ではなく、1行としました。

textarea が複数あっても、id を変えれば対応できるようにしてあります。


今回は、リアルタイムに行数を数えたかったので、 javascript を使いました。リアルタイムで行数を数えたいということはあまりないと思うので、php などを使ってサーバー側で数えた方がいいかもしれません。



タグ:JavaScript 行数
nice!(0)  コメント(0) 
共通テーマ:パソコン・インターネット

textarea に入力された文字数を、リアルタイムに数える [JavaScript]

textarea に入力された文字数を、リアルタイムに数える javascript のサンプルです。

<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで文字数を数える</title>

<script type="text/javascript"><!--
function CountStr( id, str ) {
document.getElementById(id).innerHTML = "文字数:" + str.length + "文字";
}// --></script>
</head>

<body>
<textarea name="text1" rows="10" cols="30" onkeyup="CountStr('input1', value);">
</textarea>

<p id="input1">文字数:0文字</p>
</body></html>

説明するほどのことでもないのですが、一応書いておきます。


javascript で、CountStr( id, str ) という関数を作り、textarea の onkeyup で呼び出します。

CountStr( id, str ) では、str.length で文字数が得られるので、表示文字列を作って、id="input1" の文字列を書き換えます。

pタグの 「文字数:0文字」 は、初期値です。

textarea が複数あっても、id を変えれば対応できるようにしてあります。

この javascript では、改行コードも1文字として数えてしまいます。もし、改行コードを数えたくないのであれば、文字数から行数を引いてやる必要があります。

今回は、リアルタイムに入力文字数を数えたかったので、 javascript を使いましたが、リアルタイムでなくてもいいのであれば、php などを使ってサーバー側で数えた方がいいかもしれません。



nice!(0)  コメント(0) 
共通テーマ:パソコン・インターネット