161sh/jointrashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/Crimekillz/jointrashposs.git synced 2024-11-22 00:43:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

(update) mfm docs

Browse Source
This commit is contained in:
kakkokari-gtyih 2024-01-26 17:08:20 +09:00
parent b58d62ead2
commit 26229ad0a2
2 changed files with 60 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/content/MfmPreview.vue
View File

@ -2,7 +2,7 @@
<div class="rounded-lg border border-slate-200 dark:border-slate-700 p-6 mfm-root mb-4 relative overflow-hidden">
<div class="absolute top-0 left-0 px-1 py-0.5 text-xs bg-slate-200 dark:bg-slate-800 rounded-br-lg z-20">{{ $t('_content.preview') }}</div>
<div class="ignore" :class="$style.mfmRoot">
<MkMfm :text="text" baseHost="misskey.io" />
<MkMfm :text="realText" baseHost="misskey.io" />
</div>
</div>
</template>
@ -10,9 +10,11 @@
<script setup lang="ts">
import MkMfm from '@/components/mk/Mfm';
defineProps<{
const props = defineProps<{
text: string;
}>();
const realText = computed(() => props.text.replace(/\\[\s]*$/gm, '\n'));
</script>
<style module>

56
content/ja/docs/2.for-users/3.features/mfm.md
View File

@ -126,6 +126,15 @@ https://example.com
<MfmPreview text="<center>MisskeyでFediverseの世界が広がります</center>"></MfmPreview>
### よみがな（ルビ）
内容によみがなを付けることができます。
```
$[ruby Misskey ミスキー]
```
<MfmPreview text="$[ruby Misskey ミスキー]"></MfmPreview>
### コード(インライン)
プログラムなどのコードをインラインでシンタックスハイライトします。
```
@ -200,6 +209,53 @@ $[bg.color=ff0 黄背景]
<MfmPreview text="$[fg.color=f00 赤字]
$[bg.color=ff0 黄背景]"></MfmPreview>
### 枠線
内容を枠線で囲むことができます。様々なスタイルを指定することができます。
```
$[border.style=solid,width=4 Default]
$[border.style=hidden No border]
$[border.style=dotted,width=2 Dotted]
$[border.style=dashed,width=2 Dashed]
$[border.style=double,width=4 Double]
$[border.style=groove,width=4 Embossed A]
$[border.style=ridge,width=4 Embossed B]
$[border.style=inset,width=4 Inset A]
$[border.style=outset,width=4 Inset B]
$[border.color=d00 Border color]
$[border.width=5 Border width]
$[border.radius=6,width=2 Border radius]
$[border.radius=5,width=2,color=888 $[position.x=1.5 ＣＳＳ]
$[position.x=1.5 完全に理解した]]
$[border.radius=5,width=2,color=888,noclip $[position.x=1.5 ＣＳＳ]
$[position.x=1.5 完全に理解した]]
```
<MfmPreview text="$[border.style=solid,width=4 Default]\
$[border.style=hidden No border]\
$[border.style=dotted,width=2 Dotted]\
$[border.style=dashed,width=2 Dashed]\
$[border.style=double,width=4 Double]\
$[border.style=groove,width=4 Embossed A]\
$[border.style=ridge,width=4 Embossed B]\
$[border.style=inset,width=4 Inset A]\
$[border.style=outset,width=4 Inset B]\
$[border.color=d00 Border color]\
$[border.width=5 Border width]\
$[border.radius=6,width=2 Border radius]\
$[border.radius=5,width=2,color=888 $[position.x=1.5 ＣＳＳ]
$[position.x=1.5 完全に理解した]]\
$[border.radius=5,width=2,color=888,noclip $[position.x=1.5 ＣＳＳ]
$[position.x=1.5 完全に理解した]]"></MfmPreview>
### 角度変更
指定した角度で回転させます。