偉大な先人に倣って技術文書をAtom+Markdownで書くフォーマットを整えた

# 偉大な先人に倣って技術文書をAtom+Markdownで書く
![自動採番例.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153338/284d64e3-99e0-77e4-bbf4-37e8ada4beda.png)


## TL;DR
1. `Atom`エディタをインストールする
1. `Atom`に`markdown-preview-enhanced`をインストールして有効にする
    - デフォルトで入っている`markdown-preview`はしっかり無効にしておこうな
    - `markdown-preview-enhanced`の設定はお好みだが，`Print Background`はチェック入れないと背景色変えてくれないぞ！
1. 下記の`technical_format.less`を技術文書をローカルに置く
1. markdownの初めに`<!-- @import "technical_format.less" -->`を入れる
1. あとは何となく書いていけばわかる（説明放棄）

```less: technical_format.less
.technical_format{

  @headerline_color: #2f51b4;

  @h2section: counter(h2counter);
  @h3section: @h2section "." counter(h3counter);
  @h4section: @h3section "." counter(h4counter);

  @h2_before: @h2section ". ";
  @h3_before: @h3section ". ";
  @h4_before: @h4section ". ";

  @figureref: "図" counter(figurecounter);
  @tableref : "表" counter(tablecounter);

  @figuretitle_before: @figureref "．";
  @tabletitle_before: @tableref "．";

  @tableheader_backgroundcolor: rgb(121, 190, 255);

  @toc_before: counters(toc_section_counter, '.') '. ';

  counter-reset: figurecounter tablecounter h2counter h3counter h4counter;

  .TOC {
    ul>li>ul{
      list-style: none;
    }
    ul>li>ul>li{
      &:first-of-type{
        counter-reset: toc_section_counter;
      }
      &::before {
          counter-increment : toc_section_counter;
          content: @toc_before;
      }
    }
  }

  hr{
    border: 0;
    height: 2px;
    border-bottom: 2px solid;
  }

  h1 {
    counter-reset: h2counter h3counter h4counter;
    text-align: center;
  }

  h2 {
    counter-reset: h3counter h4counter;
    padding-bottom: 0.3em;
    padding-height: 1.2;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: @headerline_color;
  }
  h3 {
    counter-reset: h4counter;
    display: inline-block;
    border-bottom: solid 1px;
    border-color: @headerline_color;
  }
  h4 {}
  h2::before {
    counter-increment: h2counter;
    content: @h2_before;
  }
  h3::before {
    counter-increment: h3counter;
    content: @h3_before;
  }
  h4::before {
    counter-increment: h4counter;
    content: @h4_before;
  }

  // テキストの位置
  .right{
    text-align: right;
    &:extend(.margin-clear);
  }
  .center {
    text-align: center;
    &:extend(.margin-clear);
  }
  .left{
    text-align: left;
    &:extend(.margin-clear);
  }


  table{
    width: auto;
    margin: 0 auto;
    // border: solid 1px #000;
    display: table;
    border-collapse: collapse;
    tr{
      th{
        background-color: @tableheader_backgroundcolor;
      }
      th, td{
        border: solid 1px black;
      }
    }
  }

  img{
    max-width: 100%;
    max-height: 100%;
    display: table;
    margin-left: auto;
    margin-right: auto;
  }

  .tabletitle{
    .center;
    &::before{
      counter-increment: tablecounter;
      content: @tabletitle_before;
    }
  }

  .figuretitle{
    .center;
    &::before{
      counter-increment: figurecounter;
      content: @figuretitle_before;
    }
  }

}

.markdown-preview.markdown-preview{
  .technical_format;
}
```

## このページで紹介していること
1. 章番号の自動採番
1. 目次にも章番号を自動採番
1. 図表番号の自動採番
1. 図表は問答無用でセンタリング


## 章番号の自動採番
h2 (`##`)以上の要素は自動的に採番して，頭に数字を付けます．
![自動採番例.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153338/284d64e3-99e0-77e4-bbf4-37e8ada4beda.png)

H1 (`#`)はナンバリングしません．センタリングします（爆）．
H1は文書タイトルを想定していますが，別に複数あってもいいです．
複数あったらその都度，章番号も振りなおします．

そのほかスタイルは先人のイカしたスタイルを利用させていただいています．
（H1要素をCSSでバチバチにイカしてくれる人すごいコメントで教えて）

## 目次にも章番号を自動採番
目次を挿入したい箇所に下記のコードをコピペします．

```markdown
<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
<div class="TOC">
<!-- code_chunk_output -->



<!-- /code_chunk_output -->
</div>
```

プレビューを表示した状態で上書き保存すると勝手に目次を挿入してくれます．

## 図を挿入する
`<p class="figuretitle">`と`</p>`で図のタイトルを囲うと自動採番+センタリングされます．

![図番号の採番.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153338/391293e6-205b-e0f1-b838-949e8f7f0327.png)

## 表を挿入する
`<p class="tabletitle">`と`</p>`で表のタイトルを囲うと自動採番+センタリングされます．

![表番号の採番.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/153338/38074de0-650d-fcda-92df-76366e5307ad.png)

## 感想
CSSﾑｽﾞｶｼｲ．


## 参考文献
- [AtomとMarkdownで技術文書を書く](https://helve-blog.com/posts/text-editor/atom-markdown/)
- [Atomとmarkdownで技術文書を書くためのスタイルシート](https://gist.github.com/helve2017/fe45c8d3c500b618dba99c8b96c6e99a)
- [Markdown の見出しに章番号を振る方法(ついでに目次にも)](https://qiita.com/UKawamura/items/42f907c88686fb3be4da)