新しい記事を書きました⇒
AmebloにGistのソースコードを貼り付けたい！（リベンジ）
GistのタグはAmeblo未対応
アメブロにもソース貼ったりしたい。アメブロでも技術的な記事が書きたい。
まーかけない事は無いけど、改行とかスペースとか表現するの難しいし、シンタックスハイライトもされないし、どうにかならないかなと思いまして、
そうだ！
Gistのコードが貼り付けられれば良いじゃん！と思ったわけです。
※Gistとは、ちょっとしたソースコードをWeb上に保存できるサービス（Githubの一機能みたいな位置づけ）
しかし、
Gistのブログ貼り付け用コードはJSだから、当然はじかれます。
まー色々試しましたが、妥協に妥協を重ね、なんとかそれっぽい感じで実現しました。
今までよりはマシレベルですが、良かったら参考にしてください。
まずフリープラグインの修正
アメブロにはフリープラグインという、なんとも自由なエリアがあります。
そこにGistで使っているタグを埋め込みます。
具体的には下記のJSとCSSを埋めておきます。
| | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script src="https://d3nwyuy0nl342s.cloudfront.net/23b11c78e6d682b6584ea8c9f1357d6a2f2e5250/javascripts/bundle_gist.js" type="text/javascript"></script>
<link href="https://d3nwyuy0nl342s.cloudfront.net/23b11c78e6d682b6584ea8c9f1357d6a2f2e5250/stylesheets/bundle_common.css" media="screen" rel="stylesheet" type="text/css" /> <link href="https://d3nwyuy0nl342s.cloudfront.net/23b11c78e6d682b6584ea8c9f1357d6a2f2e5250/stylesheets/bundle_gist.css" media="screen" rel="stylesheet" type="text/css" />
|
GistからHTMLをコピーしてきます。
ここからはかなり強引です。
Gistの表示画面からソース部分のHTMLを持ってきます。
| | <div id="file_gist2ameblo.html" class="file">
このタグを全部貼り付ける file_gist2ameblo.htmlはGistのファイル名なので、毎回異なる。
</div>
|
これをブログエディターのHTML表示モードに貼り付けます。
しかし、この中にはうまく作動しないタグが含まれているので、削ります。
削るのは下記の2箇所
| | <div class="actions"> <div style="display:inline;" id="gist-embed"> <a class="gist-embed-link" href="#">embed</a> <input type="text" style="display:none;" value="<script src="https://gist.github.com/973774.js?file=gist2ameblo.html"></script>" size="25" class="gist-embed-box"> </div> <a href="/raw/973774/fe1bd6594630876279eed3d7b7e01ae7e785c1fc/gist2ameblo.html">raw</a> </div>
|
ここは、禁止タグのinputタグや、リンク先が相対パスのaタグがあるので削ります。
| | <pre class="line_numbers"><span rel="#L1" id="L1">1</span> <span rel="#L2" id="L2">2</span> <span rel="#L3" id="L3">3</span> <span rel="#L4" id="L4">4</span> <span rel="#L5" id="L5">5</span> </pre>
|
こっちは行番号の表示なのですが、CSSばバッティングしてうまく動かないので削ります。
これで完成です。
さーアメブロでどんどん技術情報を書こう
この方法は公開面でしか効きません。アメンバー限定や表示の確認ではCSSが効かないので注意してください。
行も表示されないし、結構はりつけるの面倒だし、公開してからじゃないと動作確認できないですが、以前よりはだいぶましになりました。
ソースはGistで編集して、貼り付ける。これの繰り返しでなんとかいけます。
よーし、これでがんばれるぞー！！
