94 lines
1.7 KiB
Vue
94 lines
1.7 KiB
Vue
<template>
|
||
<div>
|
||
<portal to="icon"><fa :icon="faFileAlt"/></portal>
|
||
<portal to="title">{{ title }}</portal>
|
||
<main class="_card">
|
||
<div class="_content">
|
||
<div v-html="body"/>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import Vue from 'vue';
|
||
import { faFileAlt } from '@fortawesome/free-solid-svg-icons'
|
||
import MarkdownIt from 'markdown-it';
|
||
|
||
const markdown = MarkdownIt();
|
||
|
||
export default Vue.extend({
|
||
metaInfo() {
|
||
return {
|
||
title: this.title,
|
||
};
|
||
},
|
||
|
||
components: {
|
||
},
|
||
|
||
watch: {
|
||
markdown() {
|
||
this.updateText();
|
||
}
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
faFileAlt,
|
||
title: '',
|
||
body: '',
|
||
markdown: `# ぽぺ
|
||
ぽぺ **ぽぺ** _ぽぺーーーーーっ！_ \`ぽぺ\`
|
||
|
||
\`\`\`
|
||
export default class Pope extends PopeBase
|
||
{
|
||
public Pope() {
|
||
return 'ぽぺ';
|
||
}
|
||
}
|
||
\`\`\``,
|
||
}
|
||
},
|
||
|
||
created() {
|
||
this.updateText()
|
||
},
|
||
|
||
methods: {
|
||
updateText() {
|
||
// markdown の全容をパースする
|
||
const parsed = markdown.parse(this.markdown, {});
|
||
if (parsed.length === 0)
|
||
return;
|
||
|
||
const buf = [ ...parsed ]
|
||
const headingTokens = [];
|
||
let headingStart = 0;
|
||
|
||
// もっとも上にある見出しを抽出する
|
||
while (buf[0].type !== 'heading_open') {
|
||
buf.shift();
|
||
headingStart++;
|
||
}
|
||
buf.shift();
|
||
while (buf[0].type as string !== 'heading_close') {
|
||
const token = buf.shift();
|
||
if (token) {
|
||
headingTokens.push(token);
|
||
}
|
||
}
|
||
|
||
// 抽出した見出しを除く部分をbodyとして抽出する
|
||
const bodyTokens = [ ...parsed ]
|
||
bodyTokens.splice(headingStart, headingTokens.length + 2);
|
||
|
||
// 各々レンダーする
|
||
this.title = markdown.renderer.render(headingTokens, {}, {});
|
||
this.body = markdown.renderer.render(bodyTokens, {}, {});
|
||
}
|
||
}
|
||
});
|
||
</script>
|