TogetterにおけるMarkdown記法による入力とその反映状況のまとめ

Togetterが突如Markdown記法を採用した。Togetter公式でもその記法の内容が紹介されたものの、事細かな挙動や一部要素など、説明されていない事項があったため、それも含めてMarkdown記法を試してみた。
38

まえがき

前回のラブライブ!

まとめ 【超進化!】Tgまとめのテキスト部分がMarkdownという新しい記法に変わりました! #使い方 #新機能 #ブログ化 もちろん、いままで書かれているものは基本的に自動的に変換されるよ! ただし、もともと変な書き方しているとうまく変換されないかも、そういう時はこの記事を参考に修正してほしいな! 51359 pv 18 33 users 60

 以上の通り、いつもタイトルとか時刻表記とかでさり気なく使ってた見出しなどの記法がMarkdownという物に変わった。
 という訳で、あえて説明された通りだけではなく、Markdown自体の説明をしているサイトから引っ張ってきて使えるか幾つか試したりしまうま。

説明

こういう風に囲まれた所に書いてあるのが打ち込んだ内容で、

その真下にあるのが出力結果。


ラインの下にコメントを書いてる。

1.ヘッダー

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### まだいける(5)
###### いけるか(6)
####### もうええやろ(7)
文字を撃ち込んだだけだとこう

見出し1

見出し2

見出し3 見出し4 まだいける(5) いけるか(6)

####### もうええやろ(7)
文字を撃ち込んだだけだとこう


Wikipediaで説明されている通り6段目まで確認。
早速公式が説明してない箇所を見つけた。

2.文字の装飾

*イタリック*
_イタリック_
*italic*
**太字**
__太字__
~~取り消し~~

イタリック
イタリック
italic
太字
太字
取り消し


どうもイタリック(斜体)はWindows版Chromeでは再現出来ないっぽい?
イタリックと太字は書き方が2種類あった。
2015/10/26 17:00追記:英数だと斜体になった。日本語フォントが斜体にならない原因?
2015/01/17 16:30追記:カタカナもイタリックになりましたね。

3.URLの表示(リンク)

http://reanimation.jp/
[Re:animation公式サイト](http://reanimation.jp/)

http://reanimation.jp/
Re:animation公式サイト


リンクっぽいアドレスを打ち込むとリンクになる。
何のひねりもなくカッコで囲むだけでした。

4.リスト

- これはリスト
+ これもリスト
* そしてリスト
 - 若干下がる
こんな所に文章を置くとこうなる
- す(小宇宙0)
 + こ(小宇宙1)
  * し(小宇宙2)
   - ず(小宇宙3)
    + つ(小宇宙4)
     * さ(小宇宙5)
      - げ(小宇宙6)
       + て(小宇宙7)
        * い(小宇宙8)
         - く(小宇宙9)
          + と(小宇宙10)
           * こ(小宇宙11)
            - う(小宇宙12)
             + な(小宇宙13)
              * っ(小宇宙14)
               - て(小宇宙15)
                - い(小宇宙16)
                 - く(小宇宙17)
                  - の(小宇宙18)
                   - か(小宇宙19)
                    - よ(小宇宙20)
  • これはリスト
  • これもリスト
  • そしてリスト
  • 若干下がる
    こんな所に文章を置くとこうなる
  • す(小宇宙0)
  • こ(小宇宙1)
  • し(小宇宙2)
  • ず(小宇宙3)
+ つ(小宇宙4)
 * さ(小宇宙5)
  - げ(小宇宙6)
   + て(小宇宙7)
    * い(小宇宙8)
     - く(小宇宙9)
      + と(小宇宙10)
       * こ(小宇宙11)
        - う(小宇宙12)
         + な(小宇宙13)
          * っ(小宇宙14)
           - て(小宇宙15)
            - い(小宇宙16)
             - く(小宇宙17)
              - の(小宇宙18)
               - か(小宇宙19)
                - よ(小宇宙20)

+と-と*は全てリストの頭に使える。
半角スペースを頭に付けると段落が下がり、4つ1単位で下がっていく模様。
段落が下がったリストから一つ改行してそのまま文章を書くと直前のリストと行頭を合わせた状態で書かさる

5.数字のリスト

1. 数字のリスト
1. 数字のリスト
1. 数字のリスト
 1. 少し下げた数字のリスト

- リストの下に置くと
1. 数字のリストは強制的に段落が下がる
 - 更に下げたリストを置くとこうなるけど
 1. 数字のリストは上と同じように下がらない
     1. ここまで下げれば流石に下がる
1. 戻る
- 更にリストを下に置くと戻る

1. 改行を一つ置いて数字のリストを頭に持ってくる
- リストはこうなる
1. 全く逆のことが起こる
- 数字のリストに加えたリストは数字のリスト間にある場合、
次の行を開けると前の行間も空く

1. そして
2. 数字のリストの番号は
5. 勝手に書き換えられるので
0. こうやっても
1. 順番通りに書かれていくだけ
- 後に数字のリストが無いと次に改行を加えても
リストの前の行間は空かない。
  1. 数字のリスト
  2. 数字のリスト
  3. 数字のリスト
  4. 少し下げた数字のリスト
  • リストの下に置くと
  1. 数字のリストは強制的に段落が下がる
  • 更に下げたリストを置くとこうなるけど
  1. 数字のリストは上と同じように下がらない
    1. ここまで下げれば流石に下がる
  2. 戻る
  • 更にリストを下に置くと戻る
  1. 改行を一つ置いて数字のリストを頭に持ってくる
  • リストはこうなる
  1. 全く逆のことが起こる
  • 数字のリストに加えたリストは数字のリスト間にある場合、
    次の行を開けると前の行間も空く
  1. そして
  2. 数字のリストの番号は
  3. 勝手に書き換えられるので
  4. こうやっても
  5. 順番通りに書かれていくだけ
  • 後に数字のリストが無いと次に改行を加えても
    リストの前の行間は空かない。

数字のリストは任意の番号とピリオドを打つだけで勝手に番号が進む仕組みになっている。
「数字のリスト」は「リスト(点だけのやつ)」とは段落と行間で違えるようにしてあるらしい。
「数字のリスト」間に「リスト(点だけのやつ)」を入れた時、その次の行を改行で送ると、その前に書かれたリストの前の行間もが空く。

6.ライン(公式説明なし)

***
---
* * *
*****
--------------

文字の直後にラインを引くと見出しになる
---





文字の直後にラインを引くと見出しになる


ラインの引き方の種類が無駄に多い。
ラインの直前に文章を置くと見出し(2段目のもの)になるので、単純にラインを引きたい場合は改行を一つ置く。
ラインの太さや色などは変えたり出来ない模様。

7.引用

>引用する
引用する
引用する

引用を終わる場合は改行を一つ開ける
>引用する
引用する
- リストを直後に置くとやっぱり引用になる
1. 他のマークダウン書式が使えてしまう
---
引用されちゃってるしライン引いちゃったから見出しになってるし

引用を終わる場合は改行するしかない

> 
>引用符を連続してつかう
> 
>> 
>>>引用を入れ子にして使う

>>入れ子を減らす
>減らない

>減る

引用する
引用する
引用する

引用を終わる場合は改行を一つ開ける

引用する
引用する

  • リストを直後に置くとやっぱり引用になる
  1. 他のマークダウン書式が使えてしまう

    引用されちゃってるしライン引いちゃったから見出しになってるし

引用を終わる場合は改行するしかない

 
引用符を連続してつかう
 

 

引用を入れ子にして使う

入れ子を減らす
減らない

減る


>を一個入れると、改行で一つ明けないかぎり引用の書体が続く。
引用表示を使ったまま、他のMarkdown書式が利用可能。
引用符を入れ子にした場合、引用符を減らすには改行で一つ空けて入力する必要がある。ちなみに、引用符の記号の後に何も入力が無いと省略されるため、全角スペースを挿入している。(「引用符を連続してつかう」の前後など)

8.展開

https://www.youtube.com/watch?v=_PsBfxHrQHY
[Splatoon(スプラトゥーン) フェス映像 シオカラ節Ver. / Nintendo 公式チャンネル](https://www.youtube.com/watch?v=_PsBfxHrQHY)

https://www.youtube.com/watch?v=_PsBfxHrQHY
Splatoon(スプラトゥーン) フェス映像 シオカラ節Ver. / Nintendo 公式チャンネル


アドレスを打ち込むだけで勝手に展開される。
その他Togetter、ニコニコ動画、Instagram、Twitpic、ついっぷるフォトが展開される。
ちなみに、Togetter編集機能(左下のやつ)からリンクとして読み込んだ時に展開される物もある。(Soundcloud、Vimeoなど。下記がその一例。)

リンク SoundCloud 高田梢枝 - 秘密基地 (Re:animation × The LASTTRAK Remix) "秘密基地"のご本人高田梢枝さんのクラウドファンディングで作るCD企画にリミキサーとしてThe LASTTRAKが参加いたします! 高田さんの書き下ろし3曲+ラストラのリミックス3曲=合計6曲+α!? クラウドファンディング実施期間は3/16日まで! Picnic. - 高田梢枝オリジナル楽曲×TheLASTTRAKによるRemixのコラボCDを作ろう! http://

9.エスケープとかコードブロックとか

(ここだけ記入と反映を表現出来ないので編集画面から見ること)

これが既にコードブロック(文字の前と後ろにバッククォートがついてる)

改行を含んだコードブロックは
バッククォートを3つ
前の行と後ろの行につける

+ エスケープしているのでリスト表示にならない

  • エスケープしてないのでリスト表示になる

+* エスケープしてないけど記述がおかしいからリスト表示にならない

*おおっと* ←エスケープしないと斜体になる


 Markdownの記法で用いられる記号はエスケープ処理が場合によっては必要。
 エスケープしたい記号の直前にキーボードの「¥」を使ったり、Shiftキーを押しながら@を打って出る点で何とかする。(両方共半角)
 コードブロックはその範囲内のみMarkdownの記法を無効化出来るけど、同時にただ書いたまんまの物を使わざるを得なくなる。
 書いたのに反映されない場合はここらへんを疑うこと。
そもそも、半角開けたりする*記法に従わな+ければ簡単---に無効化されるので_気にする__必要**は無いかもしれない。

追記

2015/10/26:玉兎(@gyokuto)さん、情報ありがとうございました。

原因

今回の原因はこれです。

Issue 368568: Modernize per-locale/script default font preferences and web UI fonts on Mac / WIndows (for CJK locales)

「Windows XP のシェアも減っているし20年ぐらい前のフォントを使うのはやめて、これからは新しいフォントを使用していこう」
という変更がされました。

Chromeに加えOperaでメイリオがデフォルトになったせいで、日本語の斜体表現がされなくなったようです。

Google Chromeの表示フォントをStylistで強制的に変更しよう [拡張機能:Stylist]:アシマネくんのほんわか日記:So-netブログ
個人的に対処する事は出来るものの、対処しない人にまで波及させる方法は無さそうです。

事細かな表現にこだわる場合、ブラウザ毎の見え方の違いに留意する必要がありそうです。