Markdownを使ってブログの書き方を練習する。(随時追記していく。)
(Markdown cheat sheetが最強すぎるが自分用メモとする。)

1. 段落と改行

改行

行末に半角スペースを2個入れると改行される。(段落の途中の改行は無視される)

見出し

# 見出し1
## 見出し2
### 見出し3
#### 見出し4

↓

見出し1

見出し2

見出し3

見出し4

2. 箇条書き

数字なし

[改行]
-[半角スペース]その1
    -[半角スペース]その2

↓

その1
- その2
箇条書き(数字あり)

[改行]
1.[半角スペース]その1
2.[半角スペース]その2
    1.[半角スペース]その2-1

↓

その1
その2
1. その2-1

3. 表

3.1 普通の表

[改行]
|あ|い|う|え|
|-|:-|-:|:-:|
|何もなし|左寄せ|右寄せ|中央寄せ|

↓

あ	い	う	え
何もなし	左寄せ	右寄せ	中央寄せ

ここまでははてなブログで「Markdown記法一覧」を書いてみるテストを参考にした。

3.2 セルの結合

テキスト

┏━━━┳━┳━┓
┃　　　┃　┃　┃
┣━┳━┻━╋━┫
┃　┃　　　┃　┃
┗━┻━━━┻━┛

html

<table>
<tr>
  <td colspan="2">水平</td>
  <td rowspan="2">垂直</td>
</tr>
<tr>
  <td>セル</td>
  <td>セル</td>
</tr>
</table>

水平		垂直
セル	セル

4. pre記法

例えばpythonの場合、```pythonを前に置く。<pre>と同じ。

```python
for i in range(10):
    print(i)
```

5. code記法

前後を``で囲む。<code>と同じ。
本文 ``コード`` ↓
本文コード

`自体をコード中に表示するには`と入力すればいい。

6. 数式

数式を書く際には_、*、[]、()を\でエスケープする

katexを使う場合。(テキストで埋め込まれる)
- 中央揃え$$e^{i\pi}+1=0$$
  $$e^{i\pi}+1=0$$
- 文中表示 $e^{i\pi}+1=0$
  $e^{i\pi}+1=0$
texを使う場合。(画像で埋め込まれる)
- 文中表示[tex:e^{i\pi}+1=0]
  [tex: e^{i\pi}+1=0]

7. URL

通常のリンク
- [ホームページ](http:www..)
- [ホームページ][id](URLは別のところに[id]:http://www..)と記述する

http://takuyaokada.hatenablog.com

ページ内リンク
リンク: [リンク先へジャンプ](#jump)
リンク先: <a name="jump"></a>リンク先

リンク先へジャンプ
 リンク先

8. 引用

>引用
>>入れ子

引用

入れ子

9. 強調

*斜文字* or _斜文字_↓
斜文字
**太文字** or __太文字__↓
太文字
***斜太文字*** or ___斜太文字___↓
斜太文字

10. 画像

サイズを気にしない時: 画像を選択して貼り付けすると[f:id:kuyata:20150918225106p: plain]のようなmarkdown記法で入力される。
サイズを変えたいとき: <img src="http://f.st-hatena.com/images/fotolife/k/kuyata/20150918/20150918225106.png" width=450>のようにする。

11.「続きを読む」を表示させる。

を入力するかエディタ画面で選択できる。

12. その他

以前導入しておいたmathjaxがなぜか動かせないのでとりあえずkatexを代わりに導入した
- KaTeXメモ - tera blog
以下をheaderに埋め込んでみた

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha384-/y1Nn9+QQAipbNQWU65krzJralCnuOasHncUFXGkdwntGeSvQicrYkiUBwsgUqc1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js"></script>
<script>// <![CDATA[
document.addEventListener("DOMContentLoaded", function(){
  renderMathInElement(
    document.body,{
      delimiters: [
        {left: "$$", right: "$$", display: true},
        {left: "$", right: "$", display: false}]})});
// ]]></script>

tex記法も使う: [tex: ]
- ただし&があると&と表示されてしまうため、<div>で囲んで使う。位置がいまいちなら<div align='center'>としておく
mathjax方式からtex記法への変換はvimだと%s/\$$[^$]\+$\$/\[tex: \1]/g
数式を表示するためにサイドバーにmathjaxを埋め込む(今はkatexに移行したので使っていない)

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
    }
  });
</script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?...">
</script>

をサイドバーにhtmlで埋め込む。

参考: MathJaxの使い方
コードを小さく表示するためにCSSを変更する

デザインCSSに

pre.code{
   font-size: 12.5px;
   line-height: 13px;
}

を埋め込む。

ブログの横幅を広げる

デザインCSSに

#container {
  width: 100%;
}
#container #content {
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  display: block;
  *zoom: 1;
}
#container #content-inner #wrapper {
  margin-right: -220px;
}
#container #content-inner #wrapper #main {
  margin-right: 220px;
}

#blog-title {
  width: 1100px;
}
#top-editarea {
  width: 1100px;
}

キーワードにリンクが貼られるのを防ぐ
はてなブログでは記事内のキーワードにリンクを自動的に貼る機能があるらしい。~~別にそれ自体は良いけれど、\sigmaのようなコマンドにリンクを貼られてしまうとmathjaxが機能しないので止めておく。~~(リンクを貼られないだけでtexコマンドは効きませんでした。)

a.keyword {
    border: 0 !important;
    text-decoration: none !important;
    pointer-events: none !important;
    cursor: default;
    color: #444444; <!-- 自分のブログの文字色に合わせる -->
}

をデザインCSSの項目に追加。スマートフォン用には<style></style>で囲んで記事-記事上のカスタマイズに追加。

参考: はてなブログの自動で勝手につくキーワード下線とリンクを消す

tak0kadaの何でもノート

発声練習、生存確認用。

はてなブログのMarkdown記法等