LoginSignup
99
79

More than 5 years have passed since last update.

Qiitaが教えてくれない記述方法

Last updated at Posted at 2016-11-17

はじめに

基本の使い方:Markdown記法 チートシート

ここではQiita公式にて記載されていないのに使える記述方法をまとめます。
他にも公式のには載ってないけど使えるというものがあれば知りたいのでコメントにて教えていただけると助かります。

Qiita公式に記載されてないので非公式の機能になります。ブラウザや端末によっては非対応や今後使えなくなる可能性もありますのでご注意ください。

Markdown

半角スペースでのコード表記

public void test() {

}

コードとして表示したい行の前に半角スペースを4つ
□□□□public void test() {
□□□□
□□□□}

リストで半角スペース2つが改行

  • a
    b
  • c
- a□□
b
- c

ご助言:nyoro_712 様

コード内にバッククォートを表示

バッククォートはコード内に出現する連続数以上を並べて囲めば表せるので、
``` は ```` ``` ```` のようにすることで表現可能です。
`テスト` は `` `テスト` ``

ご助言:kimama1997 様

MathJax

Qiitaでは$2^3$や$\cos\theta$のような数式を書くためにMathJaxというものを使っています。

  • $\mathbb{Blackboard Bold}$
    黒板太字のフォントにする(英数字のみ)
    $\mathbb{Blackboard Bold}$

  • $\color{blue}{\rm Blue}$ & $\color{red}{\rm 赤}$
    色を変更する
     $\color{blue}{\rm Blue}$ & $\color{red}{\rm 赤}$

HTMLタグ

ここに書いている以外にもHTMLタグなら使えるものがあると思います。
Markdownで代用できる機能であればそちらを推奨します。
注意:HTMLタグをリストに対して使用すると目次ではタグの文字列が表示されるため非推奨です

HTML標準タグ

  • 画像表示
    • ![画像名](画像のURL):公式Markdown
    • <img width="サイズ" alt="画像名" src="画像URL">:HTMLタグ
      • 記事の編集画面で右上の画像を挿入するボタンを使ったときサイズが大きい画像の場合自動でHTMLタグで挿入されます

  • 明示的な改行
    • リストなどで改行したいとき、普通に改行すると..
    • このように次のリストと認識される。
    • また、spaceやtabを使って無理やりやると..              自由なページサイズに対応できない
    • <br>を使うことで
      このように綺麗に改行できる。
      • リストと...

      • ...リストの間に行<br><br>を挟むことなども可能。
      • 注釈1内での改行にも利用できます。
        • カーソルを合わせた時は1行で表示される
      • 画像と文字を綺麗に改行させたいときなどにも利用できる。
        • 通常は文字の右側に画像が入るスペースがあると画像を追加しても横並びになってしまうが...
        • 文字と画像の間に改行の<br>を入れると綺麗に表示される


  • アイコンの使用
  • 絵文字以外でもHTMLタグにて使えるアイコンです。

    <i class="fa fa-picture-o">

    <i class="fa fa-smile-o">

    <i class="fa fa-question-circle">

    <i class="fa fa-book">

    <i class="fa fa-list-ol tabicon">

    <i class="fa fa-bold tabicon">

    <i class="fa fa-file-text">

    <i class="fa fa-cubes">

    <i class="fa fa-cube">

  • 色変更
    • 赤色青色灰色など...
      <font color="#000000">文字</font>

ご助言:YusukeSuzuki@github 様

Bootstrap

QiitaがBootstrapを元に作られているのでその機能が使用できる
Bootstrapの記述方法に関してはたくさんありますので省略させていただきます。

  • label
    Label
    <span class="label label-default">Label</span>

ご助言:dokubeko 様


3行目:普通に改行すると注釈として認識されない


  1. 1行目:よく1行だけで書いてある。
    2行目:<br>を使うと注釈のまま改行できる。 

99
79
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
99
79