編集部イチオシ

記事を装飾しようとしたらうまくいかなかったまとめ【2021年7月22日時点】

Togetterの強化されたはずの装飾に振り回されたので読むよりも書いた結果を見るための記事
25

ツイートをまとめるのがtogetterの本分のはずがツイートが一切ないURLとテキストだけのゴミまとめ

この記事を作った趣旨

ツイート、まとめで追加したテキストに装飾を行うことで強調したい単語適当に流してもいい気がする文章意図的にらわしいらわしいを並べて頻出した場合に見分けやすくする、あえて
をする方は多いかと思います。


引用、プログラムコード向けのコードブロックといったものもあるのでツイートの引用を元にプログラムを追記する、という使い方もできます。

・よくあるコマンドのサンプルコード

$ sudo rm -rf /

シンタックスハイライトっぽい装飾も頑張ればできます。
・Luaでの動くか謎のサンプル

--関数

function hoge ()
local i = os.time()
i = "時間:" .. i
return i
end 

str = hoge()

・Luaのコメント等

--[[
複数行コメント
]]

here_docu=[[
ヒアドキュメント
]]

これを装飾しようとすると

[--[[]{{c14 f13}}
[複数行コメント]]{c14 f13}
[]]]{c14 f13}
here_docu=[[
[ヒアドキュメント]]{c14 f13}
[]]]{c14 f13}

[--[[]{{c14 f13}}
複数行コメント
[]]]{c14 f13}
here_docu=[[
ヒアドキュメント
[]]]{c14 f13}

どうやら[]挟んだ箇所は装飾がうまくいかないようです。エスケープによる\\[\[いったこともできないので、他にも正しく動かないことがある記述がないのか確認のために「これ書いたらどうなる?」を書きました。

確認漏れはあると思っているので忘れた頃に変わっていたりするかもしれません。

※基本的な書き方はこちらにあるので割愛

まとめ 【超進化!】Tgまとめのテキスト部分がMarkdownという新しい記法に変わりました! #使い方 #新機能 #ブログ化 もちろん、いままで書かれているものは基本的に自動的に変換されるよ! ただし、もともと変な書き方しているとうまく変換されないかも、そういう時はこの記事を参考に修正してほしいな! 51161 pv 18 33 users 60
まとめ 【新機能】まとめ内のテキストが、ツイートと同じ感覚でデコれるようになりました! #新機能 #使い方 #ブログ化 新たに実装した「Markdownで書かれたまとめ内のテキストのデコレーション機能」について説明しますっ! 20840 pv 59 9 users 15
まとめ 【圧倒的改善】ツイートの「デコレーション機能」が使いやすくなりました!二度塗りもできるよっ!! さらに、ハッシュタグやURLも気にせずデコれます! 33754 pv 38 8 users 3

Markdownによる斜体、太字、取り消し線

基本

\*斜体にする文章\*
\*\*太字になる文章\*\*
\~\~取り消し線がつく文章\~\~

斜体にする文章
*太字になる文章*\
取り消し線がつく文章

3つ基本的な書き方を組み合わせて書く場合はこうなります。

  • 対応する書式の重なりを守る場合
・対応する書式の重なりを守る場合

**太字** ***斜体*** ~~***打ち消し線を追加***~~

**太字** ~~**打ち消し線を追加**~~ *~~**斜体を追加**~~*

*斜体* ***太字を追加*** ~~***打ち消し線を追加***~~

*斜体* ~~**打ち消し線を追加**~~ *~~**太字を追加**~~*

~~打ち消し線~~ **~~太字を追加~~** ***~~斜体を追加~~***

~~打ち消し線~~ *~~斜体を追加~~* ***~~太字を追加~~***

結果:
太字 斜体 打ち消し線を追加
太字 打ち消し線を追加 斜体を追加
斜体 太字を追加 打ち消し線を追加
斜体 打ち消し線を追加 太字を追加
打ち消し線 太字を追加 斜体を追加
打ち消し線 斜体を追加 太字を追加

  • 意図的に順序を変えた場合
**太字** * **斜体* ** ~~ ** *打ち消し線を追加* ~~ **

**太字** **~~打ち消し線を追加**~~ * **~~斜体を追加**~~*

*斜体* ** *太字を追加** * ~~ ** *打ち消し線を追加* ~~ **

*斜体* ~~ **打ち消し線を追加~~ ** * ~~ **太字を追加~~ ** *

~~打ち消し線~~ ~~**太字を追加~~** * ~~ ** 斜体を追加~~ * **

~~打ち消し線~~ *~~斜体を追加*~~ *~~**太字を追加~~** *

表示:
太字 * 斜体 ~~ 打ち消し線を追加* ~~
太字 打ち消し線を追加** *
斜体を追加**
斜体* *太字を追加* ~~ 打ち消し線を追加 ~~
斜体 ~~
打ち消し線を追加~~ ~~ 太字を追加~~
打ち消し線 ~~
太字を追加* ~~ ** 斜体を追加 * *
打ち消し線
斜体を追加* **太字を追加**

結果

複数の効果を重ねるには太字 斜体 打ち消し線 重なりの順番を守ればOK

全体を太字にした文章中に【斜体にしたい箇所がある場合】には全体を太字、部分的に斜体はOK
太字と斜体になっている部分も打ち消し線をする場合も共通

** 全体を太字にした文章中に*【斜体にしたい箇所がある場合】*には全体を太字、部分的に*斜体*はOK **
***太字と斜体になっている部分も~~打ち消し線~~をする場合も共通***

字と で挟まれた部分を打ち消し線をかけたい場合は途中で
  **「太」**~~**「太消」**~~*「斜」* *~~「斜消」~~*
と細かく分ける必要がある。

~~**太**~~**字と** *斜*~~*体*で挟まれた部分を打ち消し線~~をかけたい場合は途中で
  `**「太」**~~**「太消」**~~*「斜」* *~~「斜消」~~*`
と細かく分ける必要がある。

色をつける装飾

20色あればそれなりのデコレーションができます。
1█2█3█4█5█6█7█8█9█10█11█12█13█14█15█16█17█18█19█20█

引用(クオート)内でもMarkDown方式の太字斜体打ち消し線は扱うはできます。

コードブロック中では**太字**、*斜体*、~~打ち消し線~~は扱うようにはなっていませんが、色を付ける方は大丈夫です。
 

ただし灰色に近い色は
コードブロックで読みにくくなるので
コメントではない限り
なるべくにしたい
鮮やかだからといっても明るさが背景と近いと読みにくくなります

この色を付ける装飾は
太字斜体打ち消し線と合わせて使えますが、
先程の組み合わせの重なりとは別扱いのため
このように太字打ち消し線ずらしても部分的には動きますが避けたほうが無難です。

**太字***斜体*~~打ち消し線~~
**太字**​*斜体*~~打ち消し線~~
※[**太字**​*斜]の**と*の間にはゼロ幅文字『​』(U+200B)が挟まっています

[コードは別箇で]{c19 f13}指定しないと装飾の指定が崩れて表示されます。

コードの色はコードの中に文字はコードに挟まれないように

【2021年7月22日追加】

フォントと行間の都合できれいに並ぶかは環境次第ですが、 (U+2003)と█(U+2588)のみのドット絵の移植です。

     ████
   ████████
  ████████
██████████
██████████
████████████
████████████
██████████
██████████
████
██████
  ████████
   ████████
     ████

幾何学的な図形と罫線文字(U+25xx)系を組み合わせてもっと凝ったものを目指すことも難しくはなさそうですが、記事が縦に長くなるので1つだけに留めます。
1つの記事内の最大文字数などが不明なのでコメントアートができる人が分かったら誰かそれだけの記事作らないかなと

http://nicowiki.com/
空白・特殊記号

リスト

  • リスト内でも太字斜体打ち消し線は扱えます
    • リストの段落下げでも色を付けることはできます
    • 色を付けるための[]は-(ハイフン)の後ろの半角スペース1つ分空けてからにします
      [- -より前の段落下げの -(ハイフン)の周りの半角スペースも含めてがここのように崩壊します
  • リスト2

【2021年7月22日追記】
+はMarkdown記法でリスト-と他に+,*で使う場合があるものの、Togetter内では+によるリストにはリストのネスト、数字と●で-の例しかなかったので対応は以下の通り

  • +をエスケープしない+でのリスト
  • +エスケープのリスト
    • ++半角スペースを挟めばエスケープはなくてもリスト扱い
  • 実は*もリスト
  • 冒頭でなければ*エスケープなしでもリスト
  • リストは1行だけでも
  • リストという扱いになるので
  • 文字がごちゃまぜであっても見た目ではわからないですが、
  • ただし文字が違うと別々なので行間が広いので混ざっているのがバレるので意図的でなければ文字は1種類で行いましょう

どこがどの文字かという答え合わせ

+ +をエスケープしない+でのリスト
+ \+エスケープのリスト
    + ++半角スペースを挟めばエスケープはなくてもリスト扱い

* 実は\*もリスト
* 冒頭でなければ*エスケープなしでもリスト

- リストは1行だけでも
+ リストという扱いになるので
* 文字がごちゃまぜであっても見た目ではわからないですが、
* ただし文字が違うと別々なので行間が広いので混ざっているのがバレるので意図的でなければ文字は1種類で行いましょう


色自体は
改行があっても
この部分全体をまとめて色をつけてくれます


区分する線は色は付きませんが

挟んで行うと部分的にしか色は付かない上、線も消えてしまうので挟まないほうが良さそうです。

[[[がいくつか重なっていても色はつけられますが、、冒頭の]はエスケープも何をやっても色はつけられません。
[]]]]{c19 f13}
[]]{c19 f13}
[\]]{c19 f13}
[
]
]{c19 f13}

リンク

- 展開される書き方
https://togetter.com/li/888903
- 展開されない書き方
[togetter](https://togetter.com/li/888903)

太字
https://togetter.com/li/888903
togetter
斜体
https://togetter.com/li/888903
togetter
打ち消し線
https://togetter.com/li/888903
togetter
Markdown記法は適応されます。

色付け
https://togetter.com/li/888903
リンク文字の色は指定できません。

引用内のコードブロック

ネストするのか、しないか

→する

引用できるのは
いくつまで?(1つだけです)

コードブロック内のコード

コードブロック内の
`コードだよ`

ヘッダに*や#はつけられるよ!

*←はエスケープいるけどヘッダに文中の→*#はいらないよ!

#ヘッダに*や#はつけられるよ!
#\*←はエスケープいるけどヘッダに文中の→*#はいらないよ!


【2021年7月22日追記】

色自体は
改行があっても
この部分全体をまとめて色をつけてくれます

  • リスト
    • りすと
  • リスト
    ※表示はされていませんが、色の装飾があります

 - リスト
    - りすと
 - リスト

エスケープには対応している文字となぜか公式記事に載っていない文字

公式記事より

  • このtogetter内で装飾,Markdown記法で使われている文字
文字装飾: * ~
リスト: - 
見出しなど: #
コード等: ` 
上記の文字のエスケープ: \ 
色をつける: [ ] { }  

Togetter公式の記事では_は紹介されていませんが
Markdownでは_も*と同じ書き方で太字と_斜体_に使えるのかは2つ並べたの太字だけです。

コードブロックのアスキーアートを普通に書くと
∧__
(´;ω;`) ずれる…

__ ∧__∧__
 (`・ω・´) ましになった

\_\_となるように挟めば

$ cat<< \_\_CAT\_\_
__ ∧__∧__
 (`・ω・´) ヨシ

\_\_CAT__

$ cat<< __CAT__
∧__
(´・ω・`) どうして…

__CAT__

と__と2つ並べて挟んでも__表示できます。

公式記事より

  • エスケープできる文字
    # * ` ~ - \ > +

    +エスケープせずに+を使う
    \+エスケープしてに+を使う

+エスケープせずに+を使う
\\+エスケープしてに+を使う

+エスケープせずに+を使う
\+エスケープしてに+を使う

+エスケープせずに+を使う
\+エスケープしてに+を使う
  • +エスケープせずに+を使う
  • +エスケープしてに+を使う
  1. +エスケープせずに+を使う
  2. +エスケープしてに+を使う

エスケープできない[と]に{と}

  • \[\]\{\}と書きたいのですが、
    [装飾がなければこのように挟んでも普通に表示されます。]
    [と]とでなるべく一緒に書いた方がいいです。
  • [のなかに{と}]や{のなかに[と]}は普通に表示されるので色はつけられませんが、配列などの記述はできます。
  • これを逆に]したり、とたとえコードを挟んだとしても[括弧対応する終わりの括弧が登場するまで色付けが正しくできません。
  • [装飾がコード部分で文字が抜けたところは終わりの括弧の書いたはずの箇所で抜け落ちています。]
  • 一度抜け落ちた終わりの括弧は【終わりの括弧】【色の装飾】がでるまでは色の指定も正しく行われなくなります。
  • [を挟んだ直後に]{なにかあれば}【色の装飾】とは限らず、括弧をそのまま文字として表示します。
  • を挟んだ直後に【何も入れないと色の装飾】括弧があるにも関わらず、表示はされません。
  • [仮に幅0の文字→]{​}を入れれば表示されます。
コードブロック中でも共通で、
[を挟んだ直後に]{なにかあれば}【色の装飾】とは限らず、括弧をそのまま文字として表示します。
を挟んだ直後に【何も入れないと】括弧があるにも関わらず、表示はされません。
[仮に幅0の文字→]{​}を入れれば
コードブロックにコピペ前提で余計な文字を入れたくない場合は半角スペースが無難かと思いましたが、書いたのに表示されない→ で代用はできません。
  • 色の装飾を手打ちでしか指定できない色番号17 文字サイズ15(c17 f15)色の装飾を指定できない色番号27 文字サイズ17(c27 f17)色の装飾を指定できないフォントの大きさ色番号21 文字サイズ26(c21 26)など見た目は変ですが、対応する括弧がない上記とは異なり、指定した通りの範囲に反映されます。
  • c〇,f〇が問題のない値であれば文字サイズ17 色番号20(f17 c20)を入れ替えても反映されます。

個人的な主張は[]{}にもエスケープ処理をください