やりたい表現10選
Qiita初心者にとって必須なMarkdown記法10こを、ピックアップ＆評価してまとめてみた。
色んな先人の記法の記事投稿があるが、まずはQiitaで表現したいこと10個。
- 章の見出しタイトルは大文字で
- 章の見出し番号を自動で割り振る
- 数式を表現する
- ソースコードを色付きで表現する
- リストを表現する
- 表を表現する
- 色付き文字を表現する
- 太字を表現する
- 画像を挿入する
- 目次を挿入する
1.章の見出しタイトルは大文字で
章のタイトルとして見出しは太文字で分かりやすくしたいが、これは誰の記事をみてもMarkdown表記の基本としてかかれている。文頭に[# スペース]を入れると、その行が見出しとして処理される。
# 見出し１
## 見出し２
### 見出し３
2.章の見出し番号を自動で割り振る
章の見出しは自動で太字で処理されるが、ある程度文章が長くなったら、自動で連番を割り振りたい。
他の人を記事を探しても、これを簡単に出来るMarkdown記法はないようだった。
ちょっと調べると、CSSを利用する方法や、独自スクリプトを書く方法などがあるようである。
とりあえずこれは一手間必要。また後日調べる。とりあえずこの記事では手動連番で書いておく
できない！！FIXME 
3.数式を表現する
アルゴリズム検討や基礎知識を投稿するために絶対必要な数式を綺麗な表記で書きたい。これは普通に出来るようである。
##3.1 数式使い方
数式の書き方としては、2通りあるようである。
- $で数式をかこって書く
-
基本的には```で書く方法は、Mathjaxというライブラリを使ってLatex記法が出来るもので、この表記で統一するのが綺麗にかけそうである。
$ 1+2=3 $
$
1+2=3
$
```math
$ 1+2=3 $
##3.2 四則演算
加減算は、普通に＋－が使える。
乗除算は、\times と、 \div が使える。
1 + 2 = 3\\ 数式を改行する時にはバックスラッシュを２つ
2 - 3 = 5\\
\ 3 \times 2 = 6\\
6 \div 3 = 2\\
1 + 2 = 3\\
2 - 3 = 5\\
\ 3 \times 2 = 6\\
6 \div 3 = 2\\
##3.3 分数
分数の表現は、 \frac{}{} で行う。
\frac{1}{2} - \frac{1}{3} = \frac{1}{6} \\
\frac{a+b}{2ab}\\
\frac{a+b}{2ab^2}
\frac{1}{2} - \frac{1}{3} = \frac{1}{6} \\
\frac{a+b}{2ab}\\
\frac{a+b}{(2ab)^{(x+1)}}
##3.4 添え字の表現
変数とかの右下に小さく書くあれは、アンダーバーを使う。
A_k
\log_a \frac{x}{y} = \log_a x - \log_a y
A_k \\
\log_a \frac{x}{y} = \log_a x - \log_a y \\
##3.5 カッコの大きさ
長い数式になると、括弧の大きさを変えて見やすくしたい。
これは、bigという記法を微妙に書き方を変えて表現できる。まちがえそうであるが。
左側の括弧には、bigにlを付けて、右括弧には、rをつける。また、大きさを変えるために、bigのbを大文字表現したり、bigの後ろにもういっこgをつける。
| 大きさ | 左括弧 | 左括弧表現 |右括弧表現 |右括弧 |備考|
|:-----------|:------------|:------------:|:------------:|:------------|:|
|括弧 | ( | $\bigl($ |$ \bigr) $ | ) |普通括弧|
|小括弧 | \bigl( | $ \bigl( $ |$ \bigr) $ |\bigr) |基本形big|
|中括弧 | \Bigl( | $ \Bigl( $ |$ \Bigr) $ |\Bigr) |B|
|大括弧 | \biggl( | $ \biggl( $ |$ \biggr) $ |\biggr) |+g|
|特大括弧 | \Biggl( | $ \Biggl( $ |$ \Biggr) $ |\Biggr) |B+g|
特大 \Biggl(
大 \biggl(
中 \Bigl(
小 \bigl(
普通 ( f + g )
\bigr)
\Bigr)
\biggr)
\Biggr)
##3.6 積分
積分はintを使って表現する。
なお、Integralの下と上の数字は、_{a}と、^{b}で表現する。
\int f(x)dx \\
\int_{a}f(x)dx\\
\int^{b}f(x)dx\\
\int_{a}^{b}f(x)dx
\int f(x)dx \\
\int_{a}f(x)dx\\
\int^{b}f(x)dx\\
\int_{a}^{b}f(x)dx
##3.7 行列
行列は、begin{pmatrix} をつかって、その中に行列の要素を記載する。
####1×1行列
\begin{pmatrix}
a
\end{pmatrix}
\begin{pmatrix}
a
\end{pmatrix}
####2×2の行列
&を使って、複数列を記載。
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
####・・・の行列表現
大きめの行列を・・・で表現したい場合は、cdotsを利用する。
A=\begin{pmatrix}
a_{11} & \cdots & a_{1i} & \cdots & a_{1n}\\
\vdots & \ddots & & & \vdots \\
a_{i1} & & a_{ii} & & a_{in} \\
\vdots & & & \ddots & \vdots \\
a_{n1} & \cdots & a_{ni} & \cdots & a_{nn}
\end{pmatrix}
A=\begin{pmatrix}
a_{11} & \cdots & a_{1i} & \cdots & a_{1n}\\
\vdots & \ddots & & & \vdots \\
a_{i1} & & a_{ii} & & a_{in} \\
\vdots & & & \ddots & \vdots \\
a_{n1} & \cdots & a_{ni} & \cdots & a_{nn}
\end{pmatrix}
####行列式
行列式の表現には、普通に括弧の代わりに| をいれる。
A = \left|
\begin{matrix}
a & b \\
c & d
\end{matrix}
\right|
##3.8 ベクトル
ベクトルを表現する場合、vecが使えるが、1変数にしか使えないので、overrightarrowを使う。
\vec{a}\\
\overrightarrow{a}\\
\overrightarrow{ab}\\
\boldsymbol{A}\overrightarrow{v}=\lambda\overrightarrow{v}
\vec{a}\\
\overrightarrow{a}\\
\overrightarrow{ab}\\
\boldsymbol{A}\overrightarrow{v}=\lambda\overrightarrow{v}
#4.ソースコードを色付きで表現する
ソースコードを張り付ける際には、言語を指定する。さらに、ファイル名を拡張子つきで記載すると、表示されるときにコードがハイライトされると同時に、ファイル名で何のコードかわかるので便利。
```javascript:hello.js
console.log("Hello World!");
~~~
```javascript:hello.js
console.log("Hello World!");
```
#5.リストを表現する
リスト表現するさいには、*を並べるか、連番にする場合は、何かの数字+. で記載する。
~~~
* リンゴ
* なすび
* キャベツ
~~~
* リンゴ
* なすび
* キャベツ
~~~
1. リンゴ
1. なすび
1. キャベツ
~~~
1. リンゴ
1. なすび
1. キャベツ
#6.表を表現する
表の表現には||を利用する。
~~~
| A | B | C |
|:-----------|:------------:|------------:| 左揃え、中央、右揃えを指定
| ナス| ナス| ナス|
~~~
| A | B | C |
|:-----------|:------------:|------------:|
| ナス| ナス| ナス|
| キャッサバ| キャッサバ| キャッサバ|
#7.色付き文字を表現する
色を付けたい文字の前後を、fontで色指定することで実現できる。
~~~
この後ろの<font color="Red">Red</font>を赤色にしたい。
この後ろの<font color="Blue">Blue</font>を青色にしたい。
~~~
この後ろの<font color="Red">Red</font>を赤色にしたい。
この後ろの<font color="Blue">Blue</font>を青色にしたい。
#8.太字を表現する
~~~
**強調の太字**
~~~
**強調の太字**
#9.画像を挿入する
画像を挿入するには、記事投稿の画面へ、画像ファイルをそのままドラッグ＆ドロップすることで、画像が投稿され、併せて画像ファイルのURLが転記される。URLを見ると、QiitaのS3へ自動でアップロードされるようである。
<font color="Red">しかしこれは元画像サイズのままなので、大きすぎる!</font>
次のタグを使って、画像サイズの調整が可能である。
URLは、一旦画像投稿すると自動で決まってくるのでコピペする。
~~~
<img width="400" alt="***.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/***.jpeg">
~~~
<img width="300" alt="patrick-jansen-SMB7Kn1Z8mc-unsplash.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1436941/336ca255-329b-9b9d-10ed-fc06618d0a91.jpeg">
#10.目次を挿入する
目次は設定とかしなくても、最近のQiitaは自動で右下に目次が生成されていた。:open_mouth: