novelaid-markdown

小説執筆アプリであるnovelaid-editorのマークダウン表示部分をライブラリ化するためのものです。

Reactのコンポーネントとして提供します。

ルビ、傍点表示

|漢字《かんじ》|漢字《かんじ》|漢字《かんじ》|
《《傍点》》
などのフォーマットをサポート。

mermaid

flowchart TD
    A --> B

コードブロックでのMermaid記法でのダイアグラム表示。

レーダーチャート簡易記法

---
color: "#00FF00"
title: "ステータス"
max: 10
---
力: 9
魔力: 10
精神力: 10
魅力: 8
器用さ: 7
運: 5

内部的にはmermaid記法に置き換えています。

D2

x -> y: Hello D2
a -> b -> c

マップ表示

id: yumenomiya-shi
width: 500px
height: 500px
lat: 35.44908129918072
long: 139.62630526087645
minZoom: 1
maxZoom: 100
defaultZoom: 11
unit: meters
scale: 1
marker: #マーカー
  - book, 35.44908129918072, 139.62630526087645, 夢ノ宮中央図書館
  - default, 35.468417634099254, 139.62221462572305, 新第二夢ノ宮駅
  - school, 35.473331684969395, 139.59161595513177,夢ノ宮探索者育成高校
  - default,35.44433609923583, 139.6509788368376,ドリームツリー
  - default,35.51411816033334, 139.6206543853919,夢ノ宮公会堂
  - default,35.50769480691667, 139.61734851965466,新夢ノ宮駅

// OSMタイル利用ポリシー (https://operations.osmfoundation.org/policies/tiles/) に適合するため
// アプリ特有の User-Agent を設定する。Mozilla/5.0 で始まらない独自の識別子が推奨されている。
app.userAgentFallback = `NovelaidEditor/${app.getVersion()} (+https://github.com/mituha/novelaid-editor)`;

なお、OSM用にはUser-Agent設定が必要。 Electornの場合、main/main.tsで上記のような設定が必要。

import 'novelaid-markdown/index.css'

また、呼び出し側のmain.tsx等で上記も必要。

CSS

ライブラリで利用しているCSSはnovelaid-markdown/index.cssにまとまっています。

import 'novelaid-markdown/index.css';

特にマップ表示でマーカーが表示されない場合等は確認してください。