SSブログ
ものもらい｜Raspberry Pi でLEDを点滅.. ブログトップ

ソネットブログにソースコードを貼る方法　[ソフト一般]

ソネットブログにソースコードを貼るには二つの方法があります。

方法１： Syntax Highlighter を使う方法　
http://alexgorbatchev.com/SyntaxHighlighter/

方法２： google-code-prettify を使う方法　
https://code.google.com/p/google-code-prettify/


Syntax Highlighter のほうがPCの見栄えはいいですが、スマホで表示が崩れる場合があります。(このサンプルは問題ないですね。。。)

// test
#include <cstdio>

int main() {
    printf("Hello World\n");
}


google-code-pretiffy は地味ですが、スマホでもそれなりに見えます。こんな感じ。

// test
#include <cstdio>

int main() {
    print("Hello World\n");
}


これらの設定は、So-netブログ管理ページのテンプレート管理でできます。

0 Template.png


上級者向けと書いてありますが、勇気をもって「HTMLの追加」を押します。

1 Template Management.png


スクリプトは<head>タグ内に配置します。検索で</head>を探して、その前にそれぞれのスクリプトを配置します。

2 EditHTML.png


</head>の前に Syntax Highlighter のスクリプトを追加します。追加したスクリプトの詳細はこちらを参照ください。

3 EditedHTML_SYTXHL.png


さらにgoogle-code-prettify を追加します。google-code-prettify の場合は、<body> に onload="prettyPrint()" を追加します。追加したスクリプトの詳細はこちらを参照ください。

4 EditedHTML_GCP.png


これで名前をつけて保存して終了です。ちなみにサンプルはHTMLで下記のように記述しています。

Syntax Highlighter
<pre class="brush: c;">
// test
#include &ltcstdio&gt

int main() {
    printf("Hello World\n");
}
</pre>


google-code-prettify
<pre class="prettyprint">
// test
#include &ltcstdio&gt

int main() {
    printf("Hello World\n");
}
</pre>


これからは、じゃんじゃんソースコードを貼っていきたいと思いますー。
（＾_＾）／～


関連記事
ブログにソースコードをどう貼るか悩む。。。パート２！
http://makers-with-myson.blog.so-net.ne.jp/2014-10-28

ブログにソースコードをどう貼るか悩む。。。
http://makers-with-myson.blog.so-net.ne.jp/2014-10-27





HTML+JavaScriptによるプログラミング入門

HTML+JavaScriptによるプログラミング入門

  • 作者: 古金谷 博
  • 出版社/メーカー: 日経BP社
  • 発売日: 2014/08/06
  • メディア: 単行本



作りながら覚えるHTML5+JavaScriptプログラミング

作りながら覚えるHTML5+JavaScriptプログラミング

  • 作者: 松岡 宣
  • 出版社/メーカー: ソフトバンククリエイティブ
  • 発売日: 2013/04/18
  • メディア: 大型本



ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング (NextPublishing)

ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング (NextPublishing)

  • 作者: 田中 賢一郎
  • 出版社/メーカー: インプレスR&D
  • 発売日: 2013/10/25
  • メディア: オンデマンド (ペーパーバック)



タグ：Syntax Highlighter HTML google-code-pretiffy
2014-10-31 23:59  nice!(43)  コメント(9)  トラックバック(1) 
共通テーマ：趣味・カルチャー

nice! 43

コメント 9

ktm

こんにちは。
いつもご訪問いただき、どうも有り難うございます。
これ、良いですね。
今まで Arduino のソースコードがうまく貼れなかったので参考にさせていただきます。

by ktm (2014-11-01 02:41) 

ys_oota

ktmさん、こちらこそいつもありがとうございます。
まだ使うのに試行錯誤していますが、重宝しそうです。まだ、SyntaxHighlighter を使うか、google-code-prettify を使うか悩んでます。
by ys_oota (2014-11-01 21:29) 

すーやん

タメになります。私のBlogも記事の追加もままならない状態ですが、きれいにしないとと思う今日この頃です。
by すーやん (2014-11-02 21:06) 

ys_oota

すーやんさん、コメントありがとうございます。ぜひご活用ください！
by ys_oota (2014-11-03 06:11) 

なめこ

こんにちは、はじめまして。
本記事、非常に参考になります。良い記事をありがとうございます。
ですが、私の環境（Mac、Safari）のせいなのか、３点ほど問題が生じました。
(1)当初、google-code-prettifyにつきまして、「その２」のスクリプトをコピペしたのですが、この記述（以下も同様）がまずいようです。
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"/script>
これって、文法的にアウトかグレーなんでしょうか？（因に私はHTMLに関してはドが１００個ぐらいつくド素人です(笑)）
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
とすることでこの問題は回避しました。（本記事の説明画像はこっちになってますね(笑)）
(2)Safariのソース表示で、<body onload="prettyPrint()" >に"ReferenceError:Can't find variable: prettyPrint"なんていうエラー表示が出てきました。うーん。。。
エラーが出ても、とりあえずgoogle-code-prettifyは動作しますし、この記述なくても動作するのですが、うちだけかもしれません。。。
(3)これは本記事の範疇外かと思いますが、so-netブログ、リッチテキスト入力でHTMLボタンから<pre>部分を編集して保存すると、<pre>内部が見事に破壊され（tag付きになる）ます。そういうもんなんでしょうか．．．？
純粋な<pre>とgoogle-code-prettifyは問題ないですが、Syntax Highlighterに関してはかなり悲惨なことになります(笑）。

以上、ご参考になるかどうかわかりませんがご報告という形で長文失礼いたしました。今後ともよろしくお願いします。

by なめこ (2016-03-19 19:42) 

ys_oota

なめこさん、ご報告ありがとうございます。
（１）はHTML表記は、<xxx></xxx>もしくは<xxx/>と書くのが文法としては正しいので、元ネタのTYPOです。ご指摘ありがとうございました。
（２）は、Safariの仕様のようです。関数で処理すべきデータが空だとこういうことがおきるようです。参考URL：
http://ja.stackoverflow.com/questions/9637/safari%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8Bjavascript%E3%82%A8%E3%83%A9%E3%83%BC%E4%BA%8C%E3%81%A4
（３）は、どのように崩れているのかよく分からないのではっきりとしたことは言えませんが、リッチテキストでXMLtagを用いているためかと推測します。Chrome等ではpre内ではXMLtagは表現されません。例えば、
#include <stdio.h> は #include となります。しかし、Syntax Highlighter ではXMLを表現できるように作っているので、Tagがそのまま表現され崩れてしまうものと思われます。
by ys_oota (2016-03-21 02:15) 

なめこ

こんにちは。大変ご丁寧なご回答に恐縮しております。お忙しいところ申しわけありませんが、もう少しお付き合いください。

(1)タグ関連の文法をちゃんと把握していないのでそういう記述もありかな？と思っていたのですが違ってたようです。知っていればイヤミな質問になっていたかもしれません。申しわけありません。。。

何にせよせっかくの記事をコピペで済ませようという私の卑しい根性がいけませんねー(笑)

なお、重ね重ねすみませんが、

<script src="https://google-code-prettify.googlecode.com/svn/loader/lang-vb.js"/script></script>

において、最初のタグの「/script」は必要でしょうか？



(2)参照URL、ありがとうございます。
いずれにせよ、onload="prettyPrint()" の記述は必要という解釈でよろしいでしょうか？



(3)まさにおっしゃる通りかと思いますが、「リッチテキストエディタで保存」した場合、例示されています記述は、

Syntax Highlighter<br /><pre class="brush: c;"><br />// test<br />#include &lt;cstdio&gt;<br /><br />int main() {<br /> printf(&quot;Hello World\n&quot;);<br />}<br /></pre><br /><br />google-code-prettify<br /><pre class="prettyprint"><br />// test<br />#include &lt;cstdio&gt;<br /><br />int main() {<br /> printf(&quot;Hello World\n&quot;);<br />}<br /></pre>

の様に変更されてしまいます（今確認したところ、リッチテキスト無し→有りに移行した段階ですでに変更されるようです。ここで保存しなければ大丈夫ですが）。
Syntax Highlighterに関しては、「リッチテキストエディタ無し」でソースを確認してから保存することが必須なようですね。リッチテキストエディタのHTMLボタンを重宝していたのですが、役に立たないですねえ。。。



当方でも本顛末を恥ずかしながら後日、記事にさせていただきます。よろしくお願いします。

またまた長文で失礼いたしました。
by なめこ (2016-03-21 13:41) 

ys_oota

なめこさん、こちらこそ色々とご指摘ありがとうございます。

(1)は、ご指摘のとおり「/script」は不要です。どうも lang-vb.js"></script>とすべきところlang-vb.jp"/script> なってしまっていたようです。&gt&lt忘れです。お恥ずかしい。再修正しておきます。

(2)は、onload="prettyPrint()" は必要です。省略してしまうとページ表示時にprettyPrint()が読み込まれず期待した表示になりません。

(3)は、リッチテキストがおせっかいにも改行などをHTMLにわざわざ置きかえてしまっているようですね。リッチテキストエディタは使えないようですね。

以上、記事のご参考になれば幸いです。＾＾
by ys_oota (2016-03-22 22:09) 

なめこ

またまたご丁寧なご回答、ありがとうございます。心よりお礼を申し上げます。
失礼ながら記事が出来たらトラックバックさせていただきたいと思います。もしよろしければ私の「痛い」ブログにも遊びにおいでください。
また、ArduinoやRaspberry Piのお話、大変興味深いので、これから少しづつ拝見させていただきます。
それでは失礼いたします。
by なめこ (2016-03-23 12:24) 

コメントを書く

お名前：
URL：
コメント：
画像認証：
下の画像に表示されている文字を入力してください。

トラックバック 1

ものもらい｜Raspberry Pi でLEDを点滅.. ブログトップ

つぶやき


この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。