編集部イチオシ
12日前

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

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

ツイートをまとめるのが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という新しい記法に変わりました! #使い方 #新機能 #ブログ化 もちろん、いままで書かれているものは基本的に自動的に変換されるよ! ただし、もともと変な書き方しているとうまく変換されないかも、そういう時はこの記事を参考に修正してほしいな! 39241 pv 196 33 users 60
まとめ 【新機能】まとめ内のテキストが、ツイートと同じ感覚でデコれるようになりました! #新機能 #使い方 #ブログ化 新たに実装した「Markdownで書かれたまとめ内のテキストのデコレーション機能」について説明しますっ! 18998 pv 33 9 users 15
まとめ 【圧倒的改善】ツイートの「デコレーション機能」が使いやすくなりました!二度塗りもできるよっ!! さらに、ハッシュタグやURLも気にせずデコれます! 32780 pv 38 7 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}指定しないと装飾の指定が崩れて表示されます。

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

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


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


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

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

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

リンク

太字
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つだけです)

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

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

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

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

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


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

コメント

コメントがまだありません。感想を最初に伝えてみませんか?