カレンダー

11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

広告



最近の記事

カテゴリー

DATE: CATEGORY:TECH


SyntaxHighlighterを使うとソースコードを貼り付ける時に
少しカラフルにおしゃれに貼り付けられます。

今までタグとかを頑張って変換してから貼り付けてましたが、
使って見ることにしました。

使った結果はこんな感じ。

普通のpreで挟んだらこんな感じだったのを、

ここにソースを書きます
 タグもこんな感じで表示されます。→ <>&!~

SyntaxHighlighterを使うと、

ここにソースを書きます
 タグもこんな感じで表示されます。→ <>&!~

綺麗ですし、便利ですね~。では、使い方。

関連記事

ブログにソースコードを貼り付けるためのSyntaxHighlighter3.0の設定方法
【続】ブログにソースコードを貼り付けるためのSyntaxHighlighter3.0の設定方法
SyntaxHighlighter 3.0 のカスタマイズ設定

ダウンロード


SyntaxHighlighterは、ここからダウンロードします。
download

ちなみに、公式の基本的な設定方法はこちら。
installation

表示方法のカスタマイズ方法はこちら。
configuration

ブログ管理の場所へアップロード


ここはブログ毎に色々違うと思いますがFC2ブログの場合は、
管理者画面のファイルアップロードメニューから必要な
ファイルをアップロードしましょう。

ダウンロードしたファイルをアーカイブしたら、
以下に必要なファイルが入っています。

syntaxhighlighter_3.0.83
  ->scripts (ここにjsファイルが入っています)
  ->styles(ここにcssファイルが入っています)

アップロードすべきファイル等は続きで記載します。

基本設定


必要なファイルをアップロードした事を前提として、
そのファイルを読み込みます。

</head>の直前にcssファイルを設定します。
URLは自分がアップロードしたものを指定しましょう。








合わせて、jsファイルも設定します。







あとは自分が必要なjsファイルも追加します。












ここまで完了したら、あとは記事に
ソースコードを書いてみます。

記事の書き方


ここまで出来れば、あとは簡単。
こんな感じで記載するだけ。


 ここにソースコードを書きます!


するとこんな感じで表示されます。

 ここにソースコードを書きます!

以上。

でも、ロードファイルが増えていくとページが
重たくなりそうで気になるなぁ、、、

2012/04/22 追記

ロードファイルは設定を変えることで削減出来るみたいでした。
【続】ブログにソースコードを貼り付けるためのSyntaxHighlighter3.0の設定方法:なんとなしの日記


タグ : ブログ ソースコード TECH

Comment

非常にわかりやすいです

いろいろなサイトに解説が載っていましたが、一番丁寧でわかりやすく、やっと実装することができました。

本当に有難うございます。

一つ、お伺いしたいことがあるのですが、此方、テストにプログラムを載せてみたのですが
http://kerotan0820.blog.shinobi.jp/Entry/142/

最後の行にどうしても勝手にヘッダーのインクルード部分が表示されてしまいます。
これは消すことはできないのでしょうか。

Re: 非常にわかりやすいです

ありがとうございます。
参考になったようで何よりです。

相談頂いた件、こちらでも試してみました。
確かに再現しましたね。

解決方法は、<stdio.h>の<, >をHTML表示用に
変換したら解決しますよ。

&lt;と&gt;に変換してみてください。

解決いたしました

記号は一部HTML用の表記にしないと正常に表示されないとは、知りませんでした。
無事解決いたしました。
本当に有難うございます。

良かったです!

返信したものの、あの文章の内容で通じたかどうか
心配でしたが、解決したみたいで、良かったです。

参考にさせていただきました

はじめまして。
とてもわかり易く綺麗にまとめてあって感動しました!
これからも色々と参考にさせていただきたいと思います。

コメントありがとうございます

はじめまして。
記事が参考になったようで、よかったです。
こういったコメントをもらえると、嬉しいです。

コメントの投稿

管理者にだけ表示を許可する


トラックバック


この記事にトラックバックする


記事でPHPコードを貼れる場所「SyntaxHighlighter」入りました!


「今日は久しぶりにPHPの勉強でもしましょ。 1年以上触ってないからすっかり忘れちゃったわ~」 と思い、せっかくだからブログにまとめようと思ったら・・・・・・ &lt;pre>タグではPHPコードが上手く表示できない!のね 設定で「HTMLタグ以外を無視」という設定をすればそのまま書くこともできそうだけど・・・・・・ 「ここはIT業界の人らしくかっこよく決めたい!!!おばち...



copyright © なんとなしの日記 all rights reserved.
内職☆在宅ワークの最強は?アフィリエイト!. 初心者だってカッコ良いホームページ作るぅ!
Powered by FC2ブログ
Related Posts Plugin for WordPress, Blogger...