拡張機能と呼ばれるもの

最初は「見たままモード」で書いてみていたが背景色のあるテーマだと破綻していたので「Markdownモード」に変更した。
「はてな記法モード」はまぁ横に Markdown あるなら選ばないかなとなってしまう。仕事で使うこと多々アリだからね。

で、そうなると困るのがテーブルを書きたいときのフォントである。
VSCodeで書いてコピペしていたが面倒だよね。と言うことで拡張機能で無理やりcssを上書きして等幅フォントを指定するようにしてみた。

FFXIVでもマクロであの手この手で揃えてる人いるくらいだしね。
こう言うとき等幅はわかりやすくて良い。

manifest.json

{
  "name": "hatenablog-edit-form-font",
  "author": "various-kiri",
  "description": "はてなブログの記事入力（本文）のフォント指定",
  "version": "1.0.0",
  "manifest_version": 3,
  "web_accessible_resources": [
    {
      "resources": ["*.ttf"],
      "matches": ["https://blog.hatena.ne.jp/*"]
    }
  ],
  "content_scripts": [
    {
      "matches": ["https://blog.hatena.ne.jp/*/edit*"],
      "css": ["edit.css"]
    }
  ]
}

edit.css

@font-face {
  font-family: "PlemolJP Regular";
  src: url("chrome-extension://__MSG_@@extension_id__/PlemolJP-Regular.ttf")
    format("truetype");
}

textarea.editor-body-textarea {
  font-family: "PlemolJP Regular", monospace;
  font-weight: 400;
  font-style: normal;
}

後は足元にフォント置いておけば完了である。実に単純明快である。
が、足元のフォント指定の仕方が分からなかったので一瞬詰まったのは内緒。

最初はGoogle Fontsで M PLUS 1 Code を直接読み込んでいたんだが、【】を持っていないらしくズレていたので止めた。
そして選んだがのが PlemolJP と言うフォント。

いい感じじゃないだろうか。ストアに公開するわけでもないので気軽なものである。
はてな側の仕様が変わったら調整必須だけどね。

// prettierは今度やる

徒然なる錐

チラシの裏の裏の裏

拡張機能と呼ばれるもの

manifest.json

edit.css