割烹markdown変換くん
割烹markdown変換くん
URL : https://k-editor.com/editor/markdown/
利用用途
・markdown形式のテキストを割烹用に変換したいとき
・サンプルタグを割烹にそのままの表示で貼り付けたいとき
今回は割烹markdown変換の使い方とどんなふうにカスタマイズができるか説明していきます。
URL : https://k-editor.com/editor/markdown/
## 基本
割烹markdown変換は文字通りmarkdown形式のテキストを割烹用のHTMLに変換するためのものです。GFM（GitHub Flavored Markdown）っぽい感じになります。
markdownとは
Markdownは、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
https://ja.wikipedia.org/wiki/Markdown
「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML（もしくはHTML）文書へと変換できるフォーマット」としてかいはつされました 。
実はこのエッセイの一部もmarkdown形式で書いてます。## とか - とかね。
割烹markdown変換くんで対応している記法は以下です。
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
> 引用
> 引用
水平線
---
- 箇条書きリスト
- 箇条書きリスト
- 箇条書きリスト
1. 番号付きリスト
1. 番号付きリスト
[リンク](https://xxx/)
**強調**
~~打消し~~
テーブル
| 左揃え | 中央揃え | 右揃え |
|:---|:---:|---:|
|1 |2 |3 |
|4 |5 |6 |
インライン`コード`です。
```
コードブロックです
```
画像は対応させてません。めんｄ……、みてみん経由にするときの変換が大変なので対応させてないです。すみません。
上のテキストを変換すると以下のコードが得られます。
<h1 style="font-size: 2em; padding: 0px 0px 0.2em; margin: 0px; font-weight: bold; border-bottom: 1px solid rgb(153, 153, 153); width: 100%; line-height: 1.5; text-align: left;">見出し1</h1>
<h2 style="font-size: 1.5em; padding: 0px 0px 0.2em; margin: 0px; font-weight: bold; border-bottom: 1px solid rgb(153, 153, 153); border-top: 0px; line-height: 1.5; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51);">見出し2</h2>
<h3 style="font-size: 1.25em; padding: 0px; margin: 0px; font-weight: bold; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); line-height: 1.5; border: 0px;">見出し3</h3>
<h4 style="font-size: 1em; padding: 0px; margin: 0px; font-weight: bold; line-height: 1.5; border: 0px;">見出し4</h4>
<h5 style="font-size: 0.85em; padding: 0px; margin: 0px; font-weight: bold; line-height: 1.5; border: 0px;">見出し5</h5>
<h6 style="font-size: 0.85em; padding: 0px; margin: 0px; color: rgb(153, 153, 153); line-height: 1.5; border: 0px;">見出し6</h6>
<blockquote>
引用
引用
</blockquote>
水平線
<hr>
<ul>
<li>箇条書きリスト</li><li>箇条書きリスト</li><li>箇条書きリスト</li></ul>
<ol>
<li>番号付きリスト</li><li>番号付きリスト</li></ol>
<a href="https://xxx/">リンク</a>
<strong>強調</strong>
<s>打消し</s>
テーブル
<table border="1" style="width: 100%;">
<thead>
<tr>
<th style="text-align:left">左揃え</th><th style="text-align:center">中央揃え</th><th style="text-align:right">右揃え</th></tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">1</td><td style="text-align:center">2</td><td style="text-align:right">3</td></tr>
<tr>
<td style="text-align:left">4</td><td style="text-align:center">5</td><td style="text-align:right">6</td></tr>
</tbody>
</table>
インライン<code style="padding: 0.2em 0.4em; margin: 0px; font-size: 95%; background-color: rgb(240, 246, 252); color: rgb(51, 51, 51);">コード</code>です。
<pre style="padding: 1em; line-height: 1.5; background-color: rgb(42, 43, 51);"><code style="padding: 0px; margin: 0px; color: rgb(252, 252, 252); white-space: pre-wrap;">コードブロックです
</code></pre>
表示はこのようになります。
markdown形式に慣れ親しんでいる人はよく見たことある装飾になります。あんまり手間をかけずに装飾をしたい人におすすめです。
## タグのそのままの表示への変換
割烹でサンプルタグを表示させたいときがあるかと思います。
割烹内でタグを使うとそのまま変換されます。ただ、コピペ用などお持ち帰り用のタグを貼り付けたいときもあるかと思います。
そんな時は
<を<
>を>
にする必要があります。なおltはless than, gtはgreater thanの略です。
例えば
<p><a href="/">トップページに戻る</a></p>というタグを表示させたいとします。そんな時に打ち込むのは以下のコードになります。
<p><a href="/">トップページに戻る</a></p>
ただいちいちそれを変換するのは面倒だと感じられるかもしれません。
その時にこの変換君を使うことができます。
タグをそのまま打ち込んだ場合、変換してくれます。
なので、お持ち帰り用のタグを作りたい人にも使えると思います。
あとは簡単にテーブルを作りたい人にもおすすめかと思います。
テーブルタグは作るのが面倒ですが、こちらは視覚的に作ることができます。
- - - ✂切り取り✂ - - -
ということで割烹markdown変換くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。
markdown形式は書きやすいので好きです。私はこれをよく使ってます。時間がない時にちょっと見た目を整えたいときにいいなって思います。
