https://wineroses.hatenablog.com/entry/2024/12/17/131103

『アカデミック・ライティングの教科書』を読んで「3色ペンが欲しいなあ」とcssを組んでみました。昔Templaterで組んだのの焼き直しです。

colors.css

CSS Editorで下記スタイルを作るだけ。

.cm-em, em{
  font-style:normal;
  background: linear-gradient(transparent 60%, skyblue 60%);
}

.cm-strong, strong{
  font-weight: normal;
  background: linear-gradient(transparent 60%, pink 60%);
}

.cm-em.cm-strong, strong em{
  font-style:normal;
  font-weight: normal;
  background: linear-gradient(transparent 60%, lime 60%);
}

使い方

Obsidian Web Clipperでクリップが溜まってくるじゃないですか。これを利用して「テーゼを探す練習をしよう」という作戦。

とくにインタビュー記事かな。対話を構造分析してみる。そのとき『アカデミック・ライティングの教科書』にあった「アカデミック・リーディングのレベル分け」が参考になると思いました。

文章の流れを「事実→観察→解釈→抽象化→テーゼ」のコード進行として捉える。そのために下線を引いてみる。って、その理屈だと5色必要になるじゃないか？

線の引き方は「斜体」と「太字」です。この方法なら汎用性が高い。「事実」を斜体に、「解釈」は太字で。「テーゼ」にはその混合体を使う。ツールバーで設定できるし、テキストがタグで汚れることもない。

要するに、*でテキストを挟むと水色、**でピンクの下線がつきます。 ***でライム。いずれもセンテンスをアンダーラインで装飾します。

日本語だと「斜体」って目立ちません。画数が多いからか、インパクトがない。でも「アンダーライン付き」にすると識別しやすい。この形式なら、まるで高校生のように線を引きまくることができます。

実は箇条書きの場合、行頭に*をつけるだけで斜体にできます。これがMarkdownの面白いところ。空行でリセットされる。行頭でメタデータをコントロールできます。

まずは小手試し

カレー沢先生のエッセイで試したけど、なんと「事実」の列挙から「解釈」に繋いでいるではないか。「観察」を挟まない「一段飛ばし」というわけだな。道理で「ジャズ味」を感じるはずです。

まとめ

ところで急に「mixi」の文字を見かけるけど、何が起こるんです？

追記 12/26

Copilotの太字もアンダーラインになってしまうので、エディタ画面だけ有効になるcssに変えてみました。

.cm-s-obsidian .cm-em, .markdown-preview-view em{
  font-style:normal;
  background: linear-gradient(transparent 60%, skyblue 60%);
}

.cm-s-obsidian .cm-strong, .markdown-preview-view strong{
  font-weight: normal;
  background: linear-gradient(transparent 60%, pink 60%);
}

.cm-s-obsidian .cm-em.cm-strong, .markdown-preview-view strong em{
  font-style:normal;
  font-weight: normal;
  background: linear-gradient(transparent 60%, lime 60%);
}

はてなブログにも3色ペンをつけてみよう - Jazzと読書の日々