🫠

自作MDEでCSS表現を工夫する(MarkDownEditer)

2025/01/29に公開

自作マークダウンエディタを使いこなしてみた

進捗管理用のメモが欲しかったので、それ用の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