feat: ✨ $[small ] and $[center ] MFM syntax

packages/client/src/components/mfm.ts

@@ -110,7 +110,7 @@ export default defineComponent({
 
 						case "fn": {
 							// TODO: CSSを文字列で組み立てていくと token.props.args.~~~ 経由でCSSインジェクションできるのでよしなにやる
-							let style;
+							let style: string;
 							switch (token.props.name) {
 								case "tada": {
 									const speed = validTime(token.props.args.speed) || "1s";
@@ -300,6 +300,24 @@ export default defineComponent({
 									style = `background-color: #${color};`;
 									break;
 								}
+								case "small": {
+									return h(
+										"small",
+										{
+											style: "opacity: 0.7;",
+										},
+										genEl(token.children),
+									);
+								}
+								case "center": {
+									return h(
+										"div",
+										{
+											style: "text-align: center;",
+										},
+										genEl(token.children),
+									);
+								}
 							}
 							if (style == null) {
 								return h("span", {}, [
@@ -337,7 +355,7 @@ export default defineComponent({
 								h(
 									"div",
 									{
-										style: "text-align:center;",
+										style: "text-align: center;",
 									},
 									genEl(token.children),
 								),

packages/client/src/pages/mfm-cheat-sheet.vue

@@ -460,8 +460,12 @@ let preview_emoji = $ref(
 	instance.emojis.length ? `:${instance.emojis[0].name}:` : ":emojiname:"
 );
 let preview_bold = $ref(`**${i18n.ts._mfm.dummy}**`);
-let preview_small = $ref(`<small>${i18n.ts._mfm.dummy}</small>`);
-let preview_center = $ref(`<center>${i18n.ts._mfm.dummy}</center>`);
+let preview_small = $ref(
+	`<small>${i18n.ts._mfm.dummy}</small> $[small ${i18n.ts._mfm.dummy}]`
+);
+let preview_center = $ref(
+	`<center>${i18n.ts._mfm.dummy}</center> $[center ${i18n.ts._mfm.dummy}]`
+);
 let preview_inlineCode = $ref('`<: "Hello, world!"`');
 let preview_blockCode = $ref(
 	'```\n~ (#i, 100) {\n\t<: ? ((i % 15) = 0) "FizzBuzz"\n\t\t.? ((i % 3) = 0) "Fizz"\n\t\t.? ((i % 5) = 0) "Buzz"\n\t\t. i\n}\n```'