tmp: Blogger

Showing posts with label Blogger. Show all posts

Thursday, October 10, 2013

BloggerでMarkdown 2

[前回の記事](http://fiahfy.blogspot.jp/2013/10/bloggermarkdown.html)でMarkdown用の設定を行ったが、  
どうも[SyntaxHighlighter](http://fiahfy.blogspot.jp/2013/01/syntaxhighlighter.html)と相性が良くないみたいなので別の方法にしてみる

Markdown変換用のJSは[marked](https://github.com/chjj/marked)  
syntax highlighterは[highlighter.js](http://softwaremaniacs.org/soft/highlight/en/)を使用する  
以下設定

###CSS追加

テンプレート→カスタマイズ  
Bloggerテンプレートデザイナー→上級者向け→CSSを追加  
で以下のCSSを追加

.markdown  { width:100%; display:none;  }

###marked, highlighter.jsをDLしてどこかに置く

* [marked](https://github.com/chjj/marked)  
    lib/marked.js を使う
* [highlighter.js](http://softwaremaniacs.org/soft/highlight/en/)  
    DOWNLOADから適当にカスタマイズしてDL  
    highlighter.pack.js と任意のcss(例としてgithub.css) を使う

marked.js, highlighter.pack.js, github.css  
上記ファイルをどこかに置く(やっぱりGoogle Sitesに置いた)

###JS追加

テンプレート→HTMLの編集

* `</head>`の直前に以下を挿入

```html

<link href='[github.cssのURL]' rel='stylesheet'/>
<script src='[highlighter.pack.jsのURL]'/>
<script language='javascript' type='text/javascript'>
 hljs.initHighlightingOnLoad();
</script>

```

* `</body>`の直前に以下を挿入(markedの設定とかは適当)

```html

<script src='[marked.jsのURL]'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'/>
<script language='javascript' type='text/javascript'>
$(function(){
 marked.setOptions({
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: true,
  smartLists: true,
  smartypants: false,
  langPrefix: '',
  highlight: function(code, lang) {
   return code;
  }
 });
 $('.markdown').replaceWith(function(){
  return $('<div/>').html(marked(this.value));
 }).show();
});
</script>

```

###記事を書いてテスト

```
<textarea class="markdown" disabled="disabled">
###見出し

* リスト1
* リスト2
* リスト3

[リンク](http://)
</textarea>
```

###参考

* <http://yslibr4ry.blogspot.jp/2013/02/markdown.html>
* <http://kannokanno.hatenablog.com/entry/2013/06/19/132042>

Wednesday, October 9, 2013

BloggerでMarkdown

.markdown  { width:100%; height:320px; overflow:scroll; display:none;  }
.showdown { }

<script src='[showdown.jsのURL]'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'/>
<script>
 $(function(){
     var sd = new Showdown.converter()
     $('.markdown').replaceWith(function(){
         return $('<div/>').html(sd.makeHtml(this.value)).addClass('showdown')
     }).show();
 });
</script>

    <textarea class="markdown" disabled="disabled">
    ###見出し
    
    - リスト1
    - リスト2
    - リスト3
    
    [link](http://dummy/)
    </textarea>

Sunday, February 10, 2013

SyntaxHighlighterでObjective-C

SyntaxHighlighterでObjective-Cをハイライトできなかったので以下のJSをヘッダに追加

<script src='https://raw.github.com/andrashatvani/shBrushObjC/master/shBrushObjC.js' type='text/javascript'/>

あとはエイリアスをocに設定

<pre class="brush: oc;">
    NSLog(@"hoge");
</pre>

参考

http://saryou.jp/blog/item/show/395

Friday, February 1, 2013

動的ビュー

Bloggerの動的ビューやめました

以下理由

表示が遅い&重い
2回目の記事表示時にSyntaxHighlighterがうまく動かない
画像をたくさん使うブログでは見栄えがいいけど、コードばかりだといまいち
そもそもコードをのせるのにあまり適してない

仕方ないね

Sunday, January 20, 2013

SyntaxHighlighter

Bloggerのソースコード表示にSyntaxHighlighterを使用しようと思ったら、動的ビューだと正常に動作しないらしい
対処法があったので以下の方法で試してみる

まず、
http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator
でガジェット用のHTMLを生成する（ソースコードのテーマカラーと、対応させる言語を選択する）
生成したHTMLからCSSの記述を削除して、
[レイアウト]→[ガジェットを追加]→[HTML/JavaScript]
にコピペして追加
2で削除したCSS（おそらく2つ）をブラウザで直接開き、中身をコピー

コピーしたCSSをちょっと修正（任意）

/* 縦スクロールバーを消す */
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  overflow-y: hidden !important; /* 追加 */
}

コピーしたCSSをさらに修正（任意）

/* ツールバー（右上の？）を消す */
.syntaxhighlighter .toolbar {
  position: absolute !important;
  right: 1px !important;
  top: 1px !important;
  width: 11px !important;
  height: 11px !important;
  font-size: 10px !important;
  z-index: 10 !important;
  display: none !important; /* 追加 */
}

（↓の方法でツールバーが消えなかったため）

<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.defaults['toolbar'] = false; // ここ
 SyntaxHighlighter.all();
</script>

コピーしたCSSを
[テンプレート]→[カスタマイズ]→[アドバンス]→[CSSの追加]
にペーストして適用
記事投稿時にソースを<pre>で括り、最後に下記のJavaScriptを記述する（記事毎に必要でちょっとめんどくさい）
```
<pre class="brush: js;">
// HTMLエンコードする
console.log('疲れた');
</pre>
<script src="http://syntaxhighlight-blogger-dynamic.googlecode.com/files/syntaxhighlighter-20111212.js" type="text/javascript"></script>
```
class="brush: [alias];"の[alias]部分はソースの言語を指定する
エイリアスは↓
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

結果↓みたいになります

// HTMLエンコードする
console.log('疲れた');

参考