PS. 20170712
結局 StackEdit からは HTML で送信して Blogger のテーマの HTML を編集して <head> タグに以下を入れるのが一番良いっぽいです
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst"></script>https://github.com/google/code-prettify/blob/master/docs/getting_started.md
PS. 20170208
結論として以下だけを行えばキレイに表示されることがわかったので以下だけ実施するようにしています
- 投稿時に custom template を選択
- body タグ内にある
<div class="container">を削除する
これで stackEdit で編集しているときのプレビューと同じ表示方法で投稿されます
過去の記事に関しては上記の設定で再投稿し直す必要があるので素直に諦めましょう
概要
BloggerでSyntaxHighlighterを使うネタを過去に投稿して、その後StackEditを使うネタを投稿して、更に投稿はしていないがstackEditでprettifyを使うようになったりして、、、
いろいろとごちゃごちゃしてきたので自分なりの設定方法と使い方をまとめておきました
各種設定と使い方
テンプレート設定
Blogger -> テンプレート -> HTMLの編集から以下を追記
</head>の直前
SyntaxHighlighterを有効にする
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPHP.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script><title>の直後
stackEditからの投稿がprettifyになっているのでスタイルだけ適用
<link href='https://raw.githubusercontent.com/google/code-prettify/master/styles/sunburst.css' rel='stylesheet' type='text/css'/>P.S 20160512
sunbrust.css の URL が 404 になっていたので Github へのリンクに変更しました
” https://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css
↓
” https://raw.githubusercontent.com/google/code-prettify/master/styles/sunburst.css
使い方
stackEditから投稿する場合
コードスニペット
コードを挿入する際にバッククオート3つを使うがその後ろに言語名を指定すること
```html
lisp等の拡張には対応していないためSyntaxColorがうまく適用されない場合はxmlを指定してSyntaxColorさせないようにする（とりあえず白黒になる）
画像の挿入
画像はstackEdit上にドラック&ドロップすればGoogle+上の保存されるのでそこから画像挿入すればOK
YAML Front Matter
冒頭のymlのラベル定義
---
tags: ["WebService", "随時更新メモ", "技術"]
---と
Table of Contents[TOC]は必ず入れる
その他のMarkdownは特に気にせず使用してOK
Google+
tackEditから投稿するとGoogle+では自動で共有されないので、もしGoogle+に共有したい場合はBloggerの管理画面から共有すること
シンタックスハイライトの設定
#-> Settings -> Extentsions -> Markdown Extra -> Syntax highlighter -> Prettify
普通に投稿する場合
シンタックスハイライトの設定
コードを挿入する場合はSyntaxHighlighterを使う
<pre class="brush: java"></pre>
指定可能な言語はJava, Ruby, PHP, CSSなのでその他に必要であればテンプレートにJavaScriptの読み込み定義を追記する
言語がなくてどうしてもSyntaxHighlighterが使えない場合は以下を使用する（基本はしようしない）
<pre style="background: #fff; border: dashed 5px #ccc; color: black; line-height: 1.3em; margin: 0px; padding: 5px;white-space: pre-wrap;"></pre>
その他見出し
見出しは
<span style="color: #6aa84f;"></span>
ブロックは
<div style="padding-left:2em;"></div>
<div style="padding-left:3em;"></div>
リンク、画像、リスト等Bloggerで使える機能は普通に使ってOK
ラベルは適切なものを選択して必ず付与する
TOCは入れられない
タイトルの付け方
英語が入る場合、タイトルを元にBloggerが勝手にURLを生成してくれます
なので英語がタイトルに入る場合は必ず単語の左右にスペースを入れるようにする
そうすることでURLがいい感じになる（英単語の間にハイフンを入れてくれる）
0 件のコメント:
コメントを投稿