am I geek...?: StackEditとBloggerの連携

StackEditとBloggerの連携について．

何度かStackEditでMarkdown記述→Bloggerに投稿の流れを試しましたが，いろいろ問題が出たのでそのまとめでも．
内容については以下．（この記事はStackEdit→Bloggerで書いてます．）

StackEditの始め方
StackEditの記述をBloggerに投稿
Bloggerとのテンプレートのすり合わせ

まずは1. StackEditの始め方から．

StackEditは基本的にブラウザで使用します．（というかこれ以外知らない）
まずはStackEditのサイトにアクセス．

こんな感じの画面になるはず．
最初はHello!か何かの記事がデフォルトで表示されていると思うので，右上のフォルダ（ディレクトリ）アイコンからNew Documentを選択．
このとき，Please consider sponsoring StackEdit for $5/year (or sign in if you're already a sponsor).とか出ますが，無料で使えるので気にせずOKを．

すると，さっきのようにごちゃごちゃしていない，きれいな状態のページが出るはず．
ここにMarkdown形式で記述していきます．
記述方法に関しては他のサイトを参照してください．

右上の部分に記事のタイトルが，画面の左にMarkdownで記述するエディタが，画面の右にMarkdownのHTML上での実際の記事が映し出されます．

次に，2.StackEditの記述をBloggerに投稿します．

投稿は簡単で，画面左上のシャープマーク#を押し，出てくるリストの中から，Publish (Export to the web)を選択します．

こんな画面が出てくるので，Blog URLに自分のBlogger URLを記入．
Update existing post IDは空でいいです．
FormatはHTMLを選びましょう．

さっきと同じ，スポンサーになってください的なメッセージが出るけど，そのままOKを押せば大丈夫です．

すると，Bloggerの認証を求められるので，流れのまま認証してください．

これで簡単にBloggerでMarkdownで書いた記事が更新……できない！

厳密には更新できているんですが，数式やらが表示できません．
試しに，
$$\frac{a}{b}$$$
と書いて更新してみましょう．
StackEdit上では数式 $\frac{a}{b}$ が表示されているんですが，Bloggerではまったく表示されていません．
また，見出しのオサレな背景↓

見出し

も表示できていません．

これは，記事のスタイルがBloggerのCSSスタイルになってしまっているから．
なのでStackEditのMarkdown用CSSをlinkしましょう．

Blogger編集画面のテンプレートから，HTMLの編集を選択．
上のほうに<head>~</head>で囲まれた部分があるので，その中に，

<link rel="stylesheet" href="https://stackedit.io/res-min/themes/base.css" />
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

を追加しましょう．
これで変更を保存すると，BloggerでもMarkdownのようなオサレな表示ができるようになります．

ただし，条件付きで．

このテンプレートをそのまま使うと，Bloggerの方で設定した背景色やら見出し文字の大きさやらが崩れてしまいます．

これを防ぐには，3.Bloggerとのテンプレートのすり合わせをする必要が．

実はBloggerで設定したCSSと，linkしたCSSが競合してしまっています．
なので，Markdownのスタイルシートであるhttps://stackedit.io/res-min/themes/base.cssを拾ってきて，自前で書き換える必要があります．

これが一番面倒．

とりあえず今回は，linkを外して，拾ってきたCSSファイルの見出しに関する部分と背景色に関する部分だけ削除することにしました．

削除したものが以下．いくらなんでも長いので開けるときは注意してください．
<style>~</style>を<link>の行の代わりに置いてください．
これでMarkdownのオサレな記述がBloggerでも問題なく表示できるはず．

以上，本文でした．

以下，スタイル部分の中身です．

am I geek...?

2015年4月6日月曜日

StackEditとBloggerの連携

これで簡単にBloggerでMarkdownで書いた記事が更新……できない！

ただし，条件付きで．

0 件のコメント:

コメントを投稿