marked-font-ijiri

テキストサイト風「フォント弄り」記法を marked に追加する拡張です。

ライブデモ

使い方

npm install marked marked-font-ijiri

import { Marked } from 'marked';
import { fontIjiri, docClass } from 'marked-font-ijiri';
import 'marked-font-ijiri/font-ijiri.css';

const marked = new Marked({ breaks: true });
marked.use(fontIjiri());

const html = marked.parse(source);
const cls = docClass();   // 'fi-doc fi-theme-black fi-align-center'

出力を <div class="${cls}"> で包み、font-ijiri.css を読み込みます。

CDN やローカルファイルから直接使う場合は、これまでどおり marked-font-ijiri.js と font-ijiri.css を読み込めます。

デモは ES モジュールを使うため、ローカルサーバー経由で開いてください。

python3 -m http.server
# → http://localhost:8000/demo.html

記法

基本形

{修飾子 本文}

{ の直後に修飾子を1文字以上、半角空白を1つ以上はさんで本文、} で閉じます。

{!! 特大の文字}
{!!!R* 赤くて太い巨大文字}
{R 色だけ変える}
{. ぼそっとしたツッコミ}
photo.jpg
{!!! photo.jpg}
{..R photo.png}

この形に合致しない波括弧はそのまま出力されます。{ "key": 1 }（修飾子が空）、 {color: red}（不正な文字を含む）、{赤くて太い巨大文字}（空白がない）はいずれも素通しです。 波括弧そのものを書きたい場合は \{ \} でエスケープできます。

複数行にかける

{{{ 以上の波括弧を行頭に置くと、}}} までの複数行に修飾がかかります。 開き行の残りが修飾子です。

{{{R
ここから赤文字です
ここも
ここまでです
}}}

• 閉じ記号は開き記号と同じ数以上必要です。入れ子にするときは外側を4個以上にします。
• 開き記号と修飾子だけを独立した行に置いてください。{{{R 本文}}} のように1行で書くと通常のインライン記法として扱われます。
• 中身は通常のブロックとして再パースされるので、段落・+++・::中央寄せ::・インライン記法・入れ子のブロックがそのまま使えます。
• 閉じ忘れた場合は文書の末尾までがブロックになります（コードフェンスと同じ挙動）。

修飾子

順不同・組み合わせ自由。

サイズ

| コード | サイズ | |---|---| | .. | 0.6em | | . | 0.8em | | なし | 1em | | ! | 1.5em | | !! | 2.5em | | !!! | 4em | | !!!! | 6em |

数を数えたくないときは数字でも指定できます（{3 テキスト} = 4em）。

色（大文字） R 赤 / B 青 / Y 黄 / G 緑 / P 桃 / W 白 / K 黒

書体・効果（小文字） m 明朝 / g ゴシック / t 等幅 / b 点滅 / s 影 / o 縁取り

装飾（記号） * 太字 / _ 斜体 / __ 下線 / - 打ち消し / ~ 薄く / # 枠

B（青）と b（点滅）、G（緑）と g（ゴシック）は大文字小文字で意味が変わります。

画像

画像ファイルパスだけの行、または {修飾子 画像パス} の本文が画像ファイルパスだけの場合は、 画像として出力します。

./assets/main.jpg
{!!! /assets/main.jpg}
{..R ./icon.png}
{# https://example.com/photo.webp}
{s ./screen.png}

• 画像パスだけの行は中サイズの画像になります。
• 画像は通常は中央寄せです。<< / >> / :: の行揃えブロック内では、その指定に従います。
• alt は空文字で出力します。
• 拡張子は png / jpg / jpeg / gif / webp / avif / svg に対応します。
• サイズは5段階です。.. が20%、. が40%、指定なしが60%、! が80%、!! 以上が100%です。数字の 1 から 5 でも指定できます。
• 枠指定は、色記号 R / B / Y / G / P / W / K が色付き枠、# が写真風、s が影付きです。指定しなければ枠なしです。

そのほか

| 記法 | 意味 | |---|---| | {{{修飾子 … }}} | 複数行にまとめて修飾 | | ((テキスト)) | {. テキスト} の略記。修飾子も付けられる（((~ 薄く小さく))） | | +++ | 3行分の間 | | +15 | 15行分の間（最大200） | | ::テキスト:: | 中央寄せ | | >>テキスト>> | 右寄せ | | <<テキスト<< | 左寄せ | | ^漢字\|かんじ^ | ルビ（｜漢字《かんじ》 も互換で使えます） |

行揃えの記号だけを独立行に置くと、同じ記号の行までがブロックになります。

>>
右寄せの
複数行
>>

>> は末尾も >> で閉じたときだけ反応します。>>36 乙 のようなアンカーや >> さらに引用 といった多重引用は、通常どおり引用として扱われます。 閉じ忘れた場合も引用になるので、右寄せにならないときは閉じ記号を確認してください。

行頭の字下げ

行頭の半角スペースとタブは NBSP に変換されるため、そのまま字下げになります。 タブは半角4文字ぶんです。全角スペース 　 は変換なしでそのまま通ります。

　むかしむかし、あるところに
  おじいさんとおばあさんが住んでいました。

リスト・引用の行、フェンス付きコードブロックの中身は変換されません。 この変換によりインデント式のコードブロック（半角4文字）は使えなくなります。 必要なら ``` のフェンスを使うか、indent: false を指定してください。

字下げは左揃えでないと意味がないので、フロントマターで align: left を指定します。

フロントマター

---
theme: black
align: center
---

• theme … black（黒地に白）/ dos（黒地に緑）/ white（白地に黒）
• align … center（既定）/ left / right

docClass() が fi-doc fi-theme-… fi-align-… を返すので、そのまま包む div に渡します。 個別に読むなら getMeta()（全キー）または getTheme() が使えます。

オプション

marked.use(fontIjiri({
  open: '{',      // 開き記号
  close: '}',     // 閉じ記号
  parens: true,   // ((…)) の略記を有効にするか
  indent: true,   // 行頭の半角スペースを字下げに変換するか
}));

開発

npm ci
npm test
npm run pack:check

GitHub Actions では main / release/** への push と main 向け Pull Request で CI が走ります。

GitHub Pages

main に push すると、.github/workflows/pages.yml がライブプレビューページを GitHub Pages に公開します。

初回だけ GitHub リポジトリの Settings → Pages で Source を GitHub Actions に設定してください。 公開対象は index.html、marked-font-ijiri.js、font-ijiri.css、assets/ です。

リリース

リリース前に package.json の version と CHANGELOG.md を更新し、v0.1.0 のようなタグまたは GitHub Release を作成します。

仕様上の注意

• インライン記法 {…} の本文は改行をまたげません。複数行にかけたい場合は {{{ … }}} を使ってください。
• 波括弧の対応は入れ子を数えるので {!! 外側{R 内側}まで} が書けます。閉じ忘れは素通しになります。
• 記法を間違えた場合はエラーにならず、そのまま文字として出力されます。意図した装飾がかからないときは、修飾子と本文の間の半角空白を確認してください。
• フロントマターの値はモジュールスコープに保持されるため、複数の文書を並行してパースすると混ざります。
• ルビは | を挟む形でのみ成立するため、(^_^) などの顔文字や 2^n、[^1] には反応しません。
• marked@12 以降を peer dependency とするため Node 18+ / モダンブラウザが必要です。

ライセンス

MIT