自作プラグイン/box

カテゴリ：プラグイン 自作 追加 未公開

デザインボックス作成プラグイン

注意やインフォメーション、引用など、事前に用意されている様々なデザインのボックスを利用できるプラグイン。

このプラグインでできること

• 視覚的にわかりやすいデザインのボックスを表示する
• 高さや幅、表示位置など様々なオプションでカスタマイズ可能
  • 一部のボックス専用のオプションあり

ダウンロード

使用方法

#box(<タイプ>[,オプション]){{
<ボックスの内容>
}}

ボックスタイプ

必ず最初に指定する。

''pre''
// 整形済みテキスト

''code''
// Google Code Prettifyによるシンタックスハイライト

オプション (汎用)

ボックスの種類によっては使えないオプションもある。

background=

border系

box-color=

color=

corner=

float=

font系

left / center / right

shadow=

tilt=

width=, height=

オプション (専用)

bracket専用

code専用

comment専用

custom専用

label専用

quote専用

#box(quote,cite=枕草子 第1段){{ ...

ボックスの種類と非対応の汎用オプション

使用例

適当な使用例をいくつか。

#box(cross,bwidth=3px,bstyle=double,width=300px,center){{
CENTER:ようこそ
}}

#box(bracket,box-color=red,width=300px,center){{
CENTER:鳴かぬなら鳴くまで待とう時鳥
}}

#flex(350){{{
#box(label,title=良い例){{
-外出時にはマスクをする
-帰ってきたら手洗いうがいをする
}}
#-
#box(label,title=悪い例,box-color=red){{
-大声で歌う
-大人数で狭い部屋に居続ける
}}
}}}

#box(custom,box-color=white,bg=#9c7fd5,width=300px,color=white,corner=sharp,shadow=hard,icon-b=f392){{
https://discord.gg/*****
}}

#box(code,lang=js){{
const hoge = document.querySelector('.hoge');

console.log(hoge);
}}

const hoge = document.querySelector('#hoge');

console.log(hoge);

追加したい機能

• 特になし。

コメント