はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

はてなブログのmarkdown記法での記事テンプレートを考える

はてなブログmarkdown記法での記事テンプレートを考える

はてなブログmarkdown記法での記事テンプレートを考えてみたのでメモ.

セクション

セクションを表すmarkdown記法はないので,各セクションを<section>タグで囲む.

難点:markdownでは,タブを使うとコードブロックになってしまうので使えない.そのため,入れ子構造が見にくくなる

<section>
## section1
contents1

<section>
### section1-1
contents1-1
</section>
</section>

<section>
## section2
contents2
</section>

目次

はてなブログ目次記法では<ul>タグのみで展開されるので, <nav>タグで囲む.

<nav>
[:contents]
</nav>

続きを読む

記事が長くなる場合,<\!-- more --> を挿入. 常に目次がみられるように,目次の後に挿入する.

ただし,<section>などの要素途中には,タグ構造が壊れるので挿入しない. 詳細は,以下の記事参照.

cartman0.hatenablog.com

<nav>[:contents]</nav>
...
<!-- more -->

画像

<figure>タグを使って, 記事の画像は基本的に図として表す. <figcaption>タグでキャプション入れる.

<figure>
![]()
<figcaption></figcaption>
</figure>

コードブロック

markdown記法の場合,コードブロックは,バッククォート3つで囲む.またはスペース4つまたはタブを入れて書く.

``` 
code 
```

はてなブログの場合,次のように言語を指定すると,シンタックスハイライトができる.

```html
<html>
<head></head>
<body></body>
</html>
```
<html>
<head></head>
<body></body>
</html>
```python
import re
```
import re

はてなブログ用の記事テンプレート

以上をまとめるとこんな感じ.

# 記事タイトル
概要

- list1
- list2
- list3

<figure>
![]()
<figcaption>図</figcaption>
</figure>

<nav>[:contents]</nav>

<!-- more -->

<section>
## 見出し1
本文1

<figure>
![]()
<figcaption>図1</figcaption>
</figure>

<section>
### 見出し1-1
本文1-1

<figure>
![]()
<figcaption>図1-1</figcaption>
</figure>
</section>

<section>
### 見出し1-2
本文1-2

<figure>
![]()
<figcaption>図1-2</figcaption>
</figure>
</section>

<section>
### 見出し1-3
本文1-3

<figure>
![]()
<figcaption>図1-3</figcaption>
</figure>
</section>
</section>

<section>
## 見出し2
本文2

<figure>
![]()
<figcaption>図2</figcaption>
</figure>

<section>
### 見出し2-1
本文2

<figure>
![]()
<figcaption>図2-1</figcaption>
</figure>
</section>
</section>

<section>
## 見出し3
本文3

<figure>
![]()
<figcaption>図3</figcaption>
</figure>

<section>
### 見出し3-1
本文3

<figure>
![]()
<figcaption>図3-1</figcaption>
</figure>
</section>
</section>

<aside id="reference-links">
## 参考リンク

- []()
- []()
- []()
</aside>

<aside id="related_links">
## 関連リンク

- []()
- []()
- []()
</aside>

広告を非表示にする