WordPress、プログラムソースを書く方法


 ワードプレスでプログラムソースを書く方法を書く。
 
 
 枠線内で普通に書く方法もあるし

 a=1    ; データの準備
 b=0

 repeat   ; 繰り返し
  stick key,,0 ; キー入力

  if key=16 : b=b+a ; もしスペースキーを押していたら、bにaを足す

  mes b  ; cの値を表示
  await 200 ; ウエイト
 loop    ; ここまでを繰り返す


 HSPエディタで書いたのを画像取り込みする方法もある
img01068

 う~ん、画像はちょっと見にくいし、普通に書くと色分けができない。

 色分けはできなくは無いけど、手動だと地獄。
 
 
 そこでここはプラグインを使う事にする。

 Crayon Syntax Highlighter

 クレヨンでいいと思う。

 
 今回のテキスト(ザ・丸投げ)はこちら! (>-<)つ

 Crayon Syntax Highlighter – ソースコードを記事上で綺麗に表示できるWordPressプラグイン NETAONEさんのページ

 Crayon Syntax Highlighterに言語を追加してみる Chronoir.netさんのページ

 下の Chronoir.netさんのは HSP用カスタマイズ編
 
 
 プラグインから新規追加を選んで
img01069
 
 
 キーワードに「crayon」と書けば出てくる
img01070
 
 
 インストールして
img01076

 有効化
img01077
 
 
 プラグインを開く
img01071

 使うのは「設定」と「テーマエディタ」。

 テーマエディタは HSPの設定を追加した後で、細かに設定する時に使う。
 
 
 設定画面
img01072

 テーマで表示するプログラムの種類を選ぶ。
 
 
 後色々な設定項目がある
img01073

 それぞれについては専用のサイトを参照してもらうとして。

 とりあえず、ツールバー邪魔だし、縞模様いらないし、行番号余計だし、くらいは言ってみる。
 
 
HSP設定の追加

 Chronoir.netさんのページから HSP用の設定フォルダをダウンロード。
 
 
 中身はこんな感じ

img01074

img01075
 
 
 このHSPフォルダをワールドプレスフォルダ内に置く。

 場所は、ワードプレスフォルダ → wp-content → uploads → crayon-syntax-highlighter → langsフォルダ。
 
 
 langsフォルダにこの HSPフォルダを入れる
img01079
 
 
 Crayonの設定画面を開いて、Duplictaeを押す
img01080

 HSPと入力して OK
img01082

 HSPと表示されたら、Editを押す
img01083

 そうするとテーマエディタが開けるようになるので編集する
img01084

 さしあたって大事なのは文字色の編集だと思う
img01085

 青枠の文字が、先に入れた HSPフォルダの中のファイルに対応してると思われるので色を調整する。
 
 
 
使い方

 エディタに crayonボタンがあると思うので押す
img01088

 言語を選んでソースコードを書き、最後に挿入ボタンを押す
img01086

 これはテキストエディタの場合だけど pre~/preになってる
img01089

 実際の表示 ↓

 a=1    ; データの準備
 b=0

 repeat   ; 繰り返し
  stick key,,0 ; キー入力
 
  if key=16 : b=b+a ; もしスペースキーを押していたら、bにaを足す
 
  mes b  ; cの値を表示
  await 200 ; ウエイト
 loop    ; ここまでを繰り返す</td>

 この HSPフォルダの設定でも、まだ表示でおかしな所はあるので、その辺は各自で思考錯誤して詰めてみてください。
 
 
 自分はめんどくさいので、これで棚上げ。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です