この記事はAdventCalendar2016 7日目の記事です.
早くも2週目です.すかいです.
皆さん文章を書く時マークダウンを利用していますか？
マークダウンを使うと簡単に良い感じのHTMLが書けるようになります.
この記事もマークダウンを利用して書いています.
今回はそんなマークダウンをBloggerで利用できるようにします.
## 導入
Blogger自体にマークダウンで書ける仕組みがないのでフロント側に頑張ってもらいます.
仕組みとしてはJSのライブラリにマークダウンを読み込んでHTMLを吐き出してくれるライブラリがあるのでこれを利用します.
ユーザーが表示する時に文章をHTMLに変換してもらうことで実現するわけです.
### テンプレートの編集
※投稿者権限だと編集出来ません
Bloggerのテンプレート -> HTMLの編集からテンプレート編集画面を開きます.
開いたら
開いたら
<head>
<script src='//rawgithub.com/chjj/marked/master/lib/marked.js'/>
中略
<script>
marked.setOptions({
gfm: true,
breaks: true,
langPrefix: ''
});
var mds = document.querySelectorAll(".md, .markdown");
for(var i=0; i < mds.length; i++){
var md = mds[i];
var converted = document.createElement("div");
var html = marked(md.innerHTML);
md.innerHTML = html;
}
</script>
</body>
<div class="md">
マークダウン
</div>
<head>
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/atom-one-dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js'/>
<script src='//rawgithub.com/chjj/marked/master/lib/marked.js'/>
<script src='//rawgithub.com/wcoder/highlightjs-line-numbers.js/master/dist/highlightjs-line-numbers.min.js'/>
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
</script>
<style>
/* 行番号用のスタイルシート */
pre > code.hljs.hljs-line-numbers {
background-color: #282c34;
border-right: 1px solid;
border-color: #abb2bf;
color: #abb2bf;
text-align: right;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<script>
marked.setOptions({
gfm: true,
breaks: true,
langPrefix: ''
});
var mds = document.querySelectorAll(".md, .markdown");
for(var i=0; i < mds.length; i++){
var md = mds[i];
var converted = document.createElement("div");
var html = marked(md.innerHTML);
md.innerHTML = html;
}
var codes = document.querySelectorAll(".md > code, .markdown > code");
for(var i=0; i < codes.length; i++){
hljs.highlightBlock(codes[i]);
hljs.lineNumbersBlock(codes[i]);
}
</script>
</body>
This is quite a .good blog. Keep sharing. I love them Are you also searching for nursing paper writing service ? we are the best solution for you. We are best known for delivering nursing paper writing services to students without having to break the bank.
返信削除What a great blog! I was wondering whether you might provide any advice to aspiring authors. I'm interested in beginning my own blog but don't know where to begin. fireboy and watergirl
返信削除