Obs171｜WonderBox：ノートを美しく装飾し、要点を強調するプラグイン

WonderBox プラグインは、Calloutsに似た外観の修飾ブロックを提供し、コンテンツの強調や要点の提示といった機能を持っています。現在、WonderBoxは閲覧モードでのみ正常に表示されます。

WonderBoxの構文はPandocのfenced divsに似ていますが、完全に同一ではありません：

::: {.callout data-callout="note" title="Note Title"}
Note content
:::

1. WonderBox構文

表示するブロックの開始と終了は3つのコロン (:::) です。開始コロンの直後には表示形式を、その後の角括弧 ([]) 内にタイトルを記述します。

利用可能な表示形式は以下の通りです：

• tip
• info
• note
• warning
• danger
• success
• error
• critical
• debug
• update
• question
• announcement
• progress
• highlight

2. 使用例

:::highlight[Quick tip]
You can use this plugin to organize your notes efficiently!
:::

:::debug[🪲 デバッグ]
tp.system.**prompt**("Input content：", clip, false, true)
 $$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$
:::

• LaTeX数式がある場合に小さな不具合があります

3. Templaterスクリプトとホットキーによるクイック入力

1. Templaterの設定フォルダにCmd-WonderBox.mdを作成します

＜%*
let lstWonderBoxes = {
  "🔥 tip" : "tip,ヒント",
  "ℹ️ info" : "info,情報",
  "✏️ note" : "note,ノート",
  "⚠️ Warning" : "warning,警告",
  "⚡ Danger" : "danger,危険",
  "✅ Success" : "success,成功",
  "❌ Error" : "error,エラー",
  "⛔ Critical" : "critical,重大なエラー",
  "🪲 Debug" : "debug,デバッグ",
  "🛠️ Update" : "update,更新",
  "❓ Question" : "question,質問",
  "📋 Announcement" : "announcement,告知",
  "📊 Progress" : "progress,進捗",
  "💡 Highlight" : "highlight,ハイライト"
 };
let keys = Object.keys(lstWonderBoxes);
// from = await tp.system.suggester(Object.keys(froms), Object.values(froms),false,'請選擇') // 元コメント保持
key = await tp.system.suggester(keys, keys, false, "Please select one"); // 英語文字列保持
if (!key) return;
let clip = await navigator.clipboard.readText();
// tp.system.prompt("内容を入力：", default_value, throw_exception, multi-line) // 翻訳済みコメント
let body = await tp.system.prompt("内容を入力：", clip, false, true); // 翻訳済みプロンプト文字列

let symbol = key.substring(0,2);
let value = lstWonderBoxes[key];
let index = value.indexOf(",");
let text = value.substring(index+1);
value = value.substring(0, index);
if (key) return `:::${value}[${symbol} ${text}]\n${body}\n:::\n`;
%>

2. Templaterプラグインのオプションにある「Template Hotkeys」で Cmd-WonderBox.md にホットキーを設定します
   

3. ホットキー設定で「Templater: Insert Cmd-WonderBox.md」にホットキーを割り当てます。以下の例では <span class='keybs'>Alt+W</span> に設定しています
   

4. Pandoc

> [!NOTE]- Note Title
>
> Note content

Pandoc:

::: {.callout data-callout="note" title="Note Title"}
Note content
:::

• Obsidian Callouts形式を含む.mdファイルをPandoc fenced-div形式の.mdファイルに変換します

pandoc -t markdown --lua-filter obsidian-callouts.lua your_file.md

• obsidian-callouts.lua

local stringify = (require "pandoc.utils").stringify

function BlockQuote (el)
    start = el.content[1]
    if (start.t == "Para" and start.content[1].t == "Str" and
        start.content[1].text:match("^%[!%w+%][-+]?$")) then
        _, _, ctype = start.content[1].text:find("%[!(%w+)%]")
        el.content:remove(1)
        start.content:remove(1)
        div = pandoc.Div(el.content, {class = "callout"})
        div.attributes["data-callout"] = ctype:lower()
        div.attributes["title"] = stringify(start.content):gsub("^ ", "")
        return div
    else
        return el
    end
end

5. 💡 関連リンク

💡 解説記事: https://jdev.tw/blog/8633/
✅Chrstn67/WonderBox
✅ https://pandoc.org/MANUAL.html#divs-and-spans
✅ 参考: Rendering callouts similarly in Pandoc - Help - Obsidian Forum

6. 解説動画

＃＃