HTML & CSS による拡張#

markdown で記述されたファイルに直接 HTML を記述することができます。
また、HTMLで記述された箇所をCSS にて装飾することも可能です。

ダウンロードリンク#

displaycode

<a href="./<ディレクトリを指定>" download="./test.zip">表示する文字列を指定

<a href="./<ディレクトリを指定>" download="./test.zip">表示する文字列を指定</a>

段組#

表示例HTMLCSS

left 1

left 2

left 3

left 4

<div id="columns">
  <li>left 1</li>
  <li>left 2</li>
  <li>right 1</li>
  <li>right 1\2</li>
</div>

#columns {
  column-count: 2;
}

table#

border none & list#

表示HTMLCSS

GET	Fetch resource	取得
PUT	Update resource	追加
DELETE	Delete resource	削除

<table class="list">
<tr><td><li>GET</li></td><td><li>Fetch resource</li></td><td><li>取得</li></td></tr>
<tr><td><li>PUT</li></td><td><li>Update resource</li></td><td><li>追加</li></td></tr>
<tr><td><li>DELETE</li></td><td><li>Delete resource</li></td><td><li>削除</li></td></tr>
</table>

table.list {
  table-layout: auto;
  width: 100%;
  border: none;
}
table.list th {
  border:none;
  text-align: left;
  padding: 3px 8px;
  margin: 3px 8px;
  font-weight: bold;
}
table.list td {
  border:none;
  text-align: left;
  padding: 3px 8px;
  margin: 3px 8px;
}

セルを結合した table#

Markdown 記法ではテーブル内のセルを結合することはできません。
そのため、HTML で記述します。

rowspan (縦方向に結合)#

表示HTML

cell 0	cell 1	cell 1
cell 0	cell 3	cell 4

<table class="basic_table">
    <tr>
        <td rowspan="2">cell 0</td>
        <td>cell 1</td>
        <td>cell 1</td>
    </tr>
    <tr>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
</table>

colspan (横方向に結合)#

表示HTML

cell 1		cell 2
cell 3	cell 5	cell 6

<table class="basic_table">
    <tr>
        <td colspan="2">cell 1</td>
        <td>cell 2</td>
    </tr>
    <tr>
        <td>cell 3</td>
        <td>cell 5</td>
        <td>cell 6</td>
    </tr>
</table>

複雑な table#

表示HTML

表1. Database command 一覧
分類名	略称	命令	内容
データ定義言語	DDL	CREATE	データベース・テーブルの生成
		CREATE	データベース・テーブルの生成
		CREATE	データベース・テーブルの生成
データ操作言語	DML	INSERT	レコードの追加
		DELETE	レコードの削除
		UPDATE	レコードの更新
		SELECT	レコードの取得
データ制御言語	DCL	COMMIT	更新・処理の確定
		ROLLBACK	更新・処理の放棄
		SAVEPOINT	セーブポイントの設定

<table class="basic_table">
    <caption>表1. Database command 一覧</caption>
    <tr>
        <th>分類名</th>
        <th>略称</th>
        <th>命令</th>
        <th>内容</th>
    </tr>
    <tr>
        <td rowspan="3">データ定義言語</td>
        <td rowspan="3">DDL</td>
        <td>CREATE</td>
        <td>データベース・テーブルの生成</td>
    </tr>
    <tr>
        <td>CREATE</td>
        <td>データベース・テーブルの生成</td>
    </tr>
    <tr>
        <td>CREATE</td>
        <td>データベース・テーブルの生成</td>
    </tr>
    <tr>
        <td rowspan="4">データ操作言語</td>
        <td rowspan="4">DML</td>
        <td>INSERT</td>
        <td>レコードの追加</td>
    </tr>
    <tr>
        <td>DELETE</td>
        <td>レコードの削除</td>
    </tr>
    <tr>
        <td>UPDATE</td>
        <td>レコードの更新</td>
    </tr>
    <tr>
        <td>SELECT</td>
        <td>レコードの取得</td>
    </tr>
    <tr>
        <td rowspan="3">データ制御言語</td>
        <td rowspan="3">DCL</td>
        <td>COMMIT</td>
        <td>更新・処理の確定</td>
    </tr>
    <tr>
        <td>ROLLBACK</td>
        <td>更新・処理の放棄</td>
    </tr>
    <tr>
        <td>SAVEPOINT</td>
        <td>セーブポイントの設定</td>
    </tr>
</table>

参考#

Attribute Lists#

生成されるHTMLの要素に任意の属性を追加することができる拡張機能。例えば見出しに対してid属性を指定したい場合次のように書く

### カスタムクエリ {: #Custom-queries}

すると以下のようなHTMLが生成される

<h3 id="Custom-queries">カスタムクエリ</h3>

Attribute Listsを使用した画像の中心揃え#

extra_cssに以下のタグを追加する

.center {
  display: block; /*ブロック要素にする*/
  margin: 0 auto; /*中心揃え*/
}

画像を中心揃えで挿入する

![image](image.png){: .center}