MFMチートシート
This commit is contained in:
syuilo
parent
c6a009dbae
commit
77db016866
4 changed files with 292 additions and 2 deletions
|
|
@ -606,6 +606,49 @@ system: "システム"
|
||||||
switchUi: "UI切り替え"
|
switchUi: "UI切り替え"
|
||||||
desktop: "デスクトップ"
|
desktop: "デスクトップ"
|
||||||
|
|
||||||
|
_mfm:
|
||||||
|
cheatSheet: "MFMチートシート"
|
||||||
|
intro: "MFMは、Misskey内の様々な場所で使用できる専用のマークアップ言語です。ここでは、MFMで使用可能な構文一覧が確認できます。"
|
||||||
|
dummy: "MisskeyでFediverseの世界が広がります"
|
||||||
|
mention: "メンション"
|
||||||
|
mentionDescription: "アットマーク + ユーザー名で、特定のユーザーを示すことができます。"
|
||||||
|
hashtag: "ハッシュタグ"
|
||||||
|
hashtagDescription: "ナンバーサイン + タグで、ハッシュタグを示すことができます。"
|
||||||
|
url: "URL"
|
||||||
|
urlDescription: "URLを示すことができます。"
|
||||||
|
link: "リンク"
|
||||||
|
linkDescription: "文章の特定の範囲を、URLに紐づけることができます。"
|
||||||
|
bold: "太字"
|
||||||
|
boldDescription: "文字を太く表示して強調することができます。"
|
||||||
|
small: "目立たなく"
|
||||||
|
smallDescription: "内容を小さく・薄く表示させることができます。"
|
||||||
|
center: "中央寄せ"
|
||||||
|
centerDescription: "内容を中央寄せで表示させることができます。"
|
||||||
|
inlineCode: "コード(インライン)"
|
||||||
|
inlineCodeDescription: "プログラムなどのコードをインラインでシンタックスハイライトします。"
|
||||||
|
blockCode: "コード(ブロック)"
|
||||||
|
blockCodeDescription: "複数行のプログラムなどのコードをブロックでシンタックスハイライトします。"
|
||||||
|
quote: "引用"
|
||||||
|
quoteDescription: "内容が引用であることを示すことができます。"
|
||||||
|
emoji: "カスタム絵文字"
|
||||||
|
emojiDescription: "コロンでカスタム絵文字名を囲むと、カスタム絵文字を表示させることができます。"
|
||||||
|
search: "検索"
|
||||||
|
searchDescription: "入力済み検索ボックスを表示させることができます。"
|
||||||
|
flip: "反転"
|
||||||
|
flipDescription: "内容を上下または左右に反転させます。"
|
||||||
|
jelly: "アニメーション(びよんびよん)"
|
||||||
|
jellyDescription: "びよんびよんするアニメーションを与えます。"
|
||||||
|
tada: "アニメーション(じゃーん)"
|
||||||
|
tadaDescription: "ジャーン！という感じのアニメーションを与えます。"
|
||||||
|
jump: "アニメーション(ジャンプ)"
|
||||||
|
jumpDescription: "飛び跳ねるようなアニメーションを与えます。"
|
||||||
|
shake: "アニメーション(ぶるぶる)"
|
||||||
|
shakeDescription: "ぶるぶるするアニメーションを与えます。"
|
||||||
|
twitch: "アニメーション(ブレ)"
|
||||||
|
twitchDescription: "激しくブレるアニメーションを与えます。"
|
||||||
|
spin: "アニメーション(回転)"
|
||||||
|
spinDescription: "回転するアニメーションを与えます。"
|
||||||
|
|
||||||
_reversi:
|
_reversi:
|
||||||
reversi: "リバーシ"
|
reversi: "リバーシ"
|
||||||
gameSettings: "対局の設定"
|
gameSettings: "対局の設定"
|
||||||
|
|
|
||||||
247
src/client/pages/mfm-cheat-sheet.vue
Normal file
247
src/client/pages/mfm-cheat-sheet.vue
Normal file
|
|
@ -0,0 +1,247 @@
|
||||||
|
<template>
|
||||||
|
<div class="mwysmxbg">
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.intro') }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.mention') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.mentionDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_mention"/>
|
||||||
|
<MkTextarea v-model:value="preview_mention"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.hashtag') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.hashtagDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_hashtag"/>
|
||||||
|
<MkTextarea v-model:value="preview_hashtag"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.url') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.urlDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_url"/>
|
||||||
|
<MkTextarea v-model:value="preview_url"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.link') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.linkDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_link"/>
|
||||||
|
<MkTextarea v-model:value="preview_link"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.emoji') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.emojiDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_emoji"/>
|
||||||
|
<MkTextarea v-model:value="preview_emoji"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.bold') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.boldDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_bold"/>
|
||||||
|
<MkTextarea v-model:value="preview_bold"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.small') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.smallDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_small"/>
|
||||||
|
<MkTextarea v-model:value="preview_small"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.center') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.centerDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_center"/>
|
||||||
|
<MkTextarea v-model:value="preview_center"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.inlineCode') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.inlineCodeDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_inlineCode"/>
|
||||||
|
<MkTextarea v-model:value="preview_inlineCode"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.blockCode') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.blockCodeDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_blockCode"/>
|
||||||
|
<MkTextarea v-model:value="preview_blockCode"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.quote') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.quoteDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_quote"/>
|
||||||
|
<MkTextarea v-model:value="preview_quote"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.search') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.searchDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_search"/>
|
||||||
|
<MkTextarea v-model:value="preview_search"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.flip') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.flipDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_flip"/>
|
||||||
|
<MkTextarea v-model:value="preview_flip"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.jelly') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.jellyDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_jelly"/>
|
||||||
|
<MkTextarea v-model:value="preview_jelly"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.tada') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.tadaDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_tada"/>
|
||||||
|
<MkTextarea v-model:value="preview_tada"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.jump') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.jumpDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_jump"/>
|
||||||
|
<MkTextarea v-model:value="preview_jump"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.spin') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.spinDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_spin"/>
|
||||||
|
<MkTextarea v-model:value="preview_spin"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.shake') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.shakeDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_shake"/>
|
||||||
|
<MkTextarea v-model:value="preview_shake"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="_section">
|
||||||
|
<div class="_title">{{ $t('_mfm.twitch') }}</div>
|
||||||
|
<div class="_content">
|
||||||
|
<p>{{ $t('_mfm.twitchDescription') }}</p>
|
||||||
|
<div class="preview _panel">
|
||||||
|
<Mfm :text="preview_twitch"/>
|
||||||
|
<MkTextarea v-model:value="preview_twitch"><span>MFM</span></MkTextarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
|
||||||
|
import MkTextarea from '@/components/ui/textarea.vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
MkTextarea
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
INFO: {
|
||||||
|
title: this.$t('_mfm.cheatSheet'),
|
||||||
|
icon: faQuestionCircle,
|
||||||
|
},
|
||||||
|
preview_mention: '@example',
|
||||||
|
preview_hashtag: '#test',
|
||||||
|
preview_url: `https://example.com`,
|
||||||
|
preview_link: `[${this.$t('_mfm.dummy')}](https://example.com)`,
|
||||||
|
preview_emoji: `:${this.$store.state.instance.meta.emojis[0].name}:`,
|
||||||
|
preview_bold: `**${this.$t('_mfm.dummy')}**`,
|
||||||
|
preview_small: `<small>${this.$t('_mfm.dummy')}</small>`,
|
||||||
|
preview_center: `<center>${this.$t('_mfm.dummy')}</center>`,
|
||||||
|
preview_inlineCode: '`<: "Hello, world!"`',
|
||||||
|
preview_blockCode: '```\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```',
|
||||||
|
preview_quote: `> ${this.$t('_mfm.dummy')}`,
|
||||||
|
preview_search: `${this.$t('_mfm.dummy')} 検索`,
|
||||||
|
preview_jelly: `[jelly 🍮]`,
|
||||||
|
preview_tada: `[tada 🍮]`,
|
||||||
|
preview_jump: `[jump 🍮]`,
|
||||||
|
preview_shake: `[shake 🍮]`,
|
||||||
|
preview_twitch: `[twitch 🍮]`,
|
||||||
|
preview_spin: `[spin 🍮] [spin.left 🍮] [spin.alternate 🍮]\n[spin.x 🍮] [spin.x,left 🍮] [spin.x,alternate 🍮]\n[spin.y 🍮] [spin.y,left 🍮] [spin.y,alternate 🍮]`,
|
||||||
|
preview_flip: `[flip ${this.$t('_mfm.dummy')}]\n[flip.v ${this.$t('_mfm.dummy')}]\n[flip.h,v ${this.$t('_mfm.dummy')}]`,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.mwysmxbg {
|
||||||
|
.preview {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -72,7 +72,8 @@ export const router = createRouter({
|
||||||
{ path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) },
|
{ path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) },
|
||||||
{ path: '/games/reversi', component: page('reversi/index') },
|
{ path: '/games/reversi', component: page('reversi/index') },
|
||||||
{ path: '/games/reversi/:gameId', component: page('reversi/game'), props: route => ({ gameId: route.params.gameId }) },
|
{ path: '/games/reversi/:gameId', component: page('reversi/game'), props: route => ({ gameId: route.params.gameId }) },
|
||||||
{ path: '/api-console', component: page('api-console') },
|
{ path: '/mfm-cheat-sheet', component: page('mfm-cheat-sheet') },
|
||||||
|
{ path: '/test', component: page('test') },
|
||||||
{ path: '/auth/:token', component: page('auth') },
|
{ path: '/auth/:token', component: page('auth') },
|
||||||
{ path: '/miauth/:session', component: page('miauth') },
|
{ path: '/miauth/:session', component: page('miauth') },
|
||||||
{ path: '/authorize-follow', component: page('follow') },
|
{ path: '/authorize-follow', component: page('follow') },
|
||||||
|
|
|
||||||
|
|
@ -346,7 +346,6 @@ hr {
|
||||||
|
|
||||||
> ._title {
|
> ._title {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
font-size: 1.25em;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue