About

*

ソースコードをブログに行番号つきでキレイに表示させるヤツ、あれどうやるの?

コレ書いた時にソースコードを表示したかったんですけど、できなくてですね。
どうやるの?と。
こういうヤツです。
MCE00

Crayon Syntax Highlighter」というプラグイン入れるとできるらしい!
と思っていろいろ調べてたんですが

と、その前に
以前、世に蔓延るブログサービスのように、自由に簡単に文字の大きさとか色とか太字にしたりだとか画像挿入したりだとかをポチっと変えられるプラグインはないものか!

と、探して入れたTinyMCE Buttons Arrangement

MCE
本文の入力画面の上部に表示される、コレコレ!!こういうことよ!
っていうヤツです。

ソースコードを表示しようとした際、こやつがどうにかしてくれるんじゃないか、とくまなく探すも見当たらず。
設定画面から追加できたりするんじゃね?と確認するも見つからず…

MCE01

まぁー今日のところはいっか、前回はそのまま済ませましたが
ソースコード載せること、これからしばしばありそう。そんな気がする。
と本日気を取り直して探しておりましたら

じゃーーん!
SyntaxHighlighter TinyMCE Button
これじゃないですか?先生!!
ということで、「プラグイン → 新規追加 → SyntaxHighlighter TinyMCE Button」 で検索。MCE02
お!☆5つ!! 迷わず、いますぐインストール!
はい、プラグインを有効化ー!
MCE03

MCE04jpg

「設定」で見るとちゃんと入った模様。

よっし新規投稿を追加して見てみようじゃないですか!
MCE05

そうです!そういうことです!!!
やってみましょう。(ちょっと無駄足がございましたのでお急ぎの方はへ)
「code」ボタンを押して試しにコードを。

MCE06
プレビューしてみっと。
MCE07

…しかしなにもおこらなかった

なにコレ。アレ?と思ったら、
よく考えれば気づきそうなもんだが「Crayon Syntax Highlighter」のプラグインを先に入れるべきだった。
なので「プラグイン → 新規追加 → SCrayon Syntax Highlighter」 の手順で再びインストール&有効化。
MCE04jpg

SH TinyMCE Buttonを選んで「使用中のプラグイン」の「その他」を選択して「設定を保存」
MCE08

そして先程と同様に上のバーの「code」ボタンを選択し、ソースコードを記載の上

MCE06

挿入ボタン、どーーーん!!
MCE09

できましたーーー!パチパチ!!

コメント/トラックバック

トラックバック用URL:

コメントフィード




管理人にのみ公開されます


  • HN:げいつ げいつです。そろそろゆとりが出てきたので、ちょいちょい更新するつもりです。
    FaceBookページ
    Twitter
  • 2021年10月
    « 2月    
     123
    45678910
    11121314151617
    18192021222324
    25262728293031
PAGE TOP ↑