🫠
自作MDEでCSS表現を工夫する(MarkDownEditer)
自作マークダウンエディタを使いこなしてみた
進捗管理用のメモが欲しかったので、それ用のCSSを作成。
下の写真は、実際に自作マークダウンとCSSを適用したものだ。
チェックしていない状態のクラスを”ox” にしたのは終わったときに消すだけで反映させられるからだ。
最初、クラス名を"check_ox"にしようとしていたが、それではマークダウンの意味がなくなってしまうので、できるだけ短い文字にした結果このクラス名になった。
自作マークダウン
<div class = "sample">
sample_text
</div>
これでは書きにくいので、
[div .sample]{
sample_text
}
という風に記述できるようにしたものだ
これを使って、クラスを宣言し、
以下のCSSを適用させる。
.ox::before
{
content: "GO ";
color: #817fda;
font-size: 150%;
}
.o::before
{
content: "OK ";
color: #7fb7da;
font-size: 150%;
}
.x::before
{
content: "NG ";
color: #da8b7f;
font-size: 150%;
}
使いこなせている感があって楽しい。
以上
使ってみたい方は、
markdownエディタを公開(テキストエディタ)
の記事を出してますので見ていただけると嬉しいです。
もし、htmlで書こうとすると。。。
<p class = "ox"> 買い物行く </p>
<p class = "x"> カードゲーム作る </p>
<p class = "o"> 洗濯物 </p>
//比較用
[p .o]{ 洗濯物 }
一つのタグ当たり16文字。
自作したほうは7文字かつ、記号の重複がないので打ちやすい。
作るのはとてつもなく大変だったがやってよかった。
Discussion