「魔法少女戦記外伝」DL委託販売中!!

DMM 同人様 Melonbooks DL様 DLsite.com 様
DMM 同人様 Melonbooks DL 様 DLsite.com 様



最新記事ほか

FC2ブログでソースコードを綺麗に表示する その2

前回の記事に引き続き、「Syntax Highlighter Scripts Generator」を利用したソースコードの表示方法を記載します。

前回:「FC2ブログでソースコードを綺麗に表示する その1」




前回は「GENERATE」ボタンを押す3.まで説明しましたので、続きの4.からになります。


4.コードの生成

「GENERATE」ボタンを押すと、ページが更新されて下記のようなコードが表示されますのでコピーして保存しましょう。

20140522_その2

2.でチェックした項目数によって生成されるコード量に差が出ますが、だいたい下記のようなコードになると思います。















5.自分のブログに設定を保存する(テンプレートの設定)

FC2ブログの利用者にはおなじみのログイン後の管理画面で「テンプレートの設定」を選びます。
みなさん各自で選んだテンプレート(見た目)によって名前は異なると思いますが、「~のHTML編集」の欄を探します。

20140522_その3


6.<head>タグの間にコピーしたコードを埋め込む

「~のHTML編集」の欄からタグを見つけ出し、4.でコピーしたコードを<head>~</head>の間に埋め込みます。
解らない場合は上記の画像のように</head>の真上に貼り付ける・・・で良いと思いますw


7.実際にFC2ブログでコード表示を確認

ここまできたら後は実際にコードをブログ記事に載せるだけなんですが、一定のルールが必要になるので要注意!
最小限の構成ですが、基本的には以下のような書き方になります。

<pre class="brush: (言語ごとのキーワード);">
~ソースコードをゴニョゴニョ~
</pre>


ここで出てくる「言語ごとのキーワード」というのが、前回の2.で説明したハイライト表示したい言語と関係しており、ソースコードに沿ったキーワードを記載することになります(下記一覧)

ソースコードキーワード
ActionScript3as3, actionscript3
Bash/shellbash, shell
C#c-sharp, csharp
C++cpp, c
CSScss
Delphidelphi, pas, pascal
Diffdiff, patch
Groovygroovy
JavaScriptjs, jscript, javascript
Javajava
JavaFXjfx, javafx
Perlperl, pl
PHPphp
Plain Textplain, text
PowerShellps, powershell
Pythonpy, python
Rubyrails, ror, ruby
Scalascala
SQLsql
Visual Basicvb, vbnet
XMLxml, xhtml, xslt, html, xhtml

キーワードがカンマ区切りで複数あるものについてはお好きなものを選んでお試しください。
以下は実際にC++で記載した例です

記載例:

<pre class="brush:cpp;">
void main()
{
printf("Syntax Highlighter test");
}
</pre>


実際の表示:

void main()
{
printf("Syntax Highlighter test");
}


これで最小限のコード記載は可能になったのではないでしょうか。
次回があれば、もう少し細かい内容をご紹介できればと思います。

ではでは~('・ω・`)ノシ

次回:「FC2ブログでソースコードを綺麗に表示する その3」
スポンサーサイト

tag : プログラミング 小ネタ

コメントの投稿

非公開コメント

プロフィール

Empress

Author:Empress
同人サークル「Atelier Empress」を立ち上げてしまった愚か者です。少しずつでも作品を公開していければと思う次第でございます。

検索フォーム
リンク
カテゴリ
タグ一覧

同人 Unity 進捗 雑記 コミケ C89 小ネタ プログラミング Unity小ネタ 年末 新年 Android 

委託販売
スポンサード リンク
FLOWER KNIGHT GIRL オンラインゲーム 千年戦争アイギス オンラインゲーム
Twitter