2021-09-24 01:19:18 +08:00
|
|
|
<script lang="ts" setup>
|
|
|
|
import { computed } from 'vue'
|
2021-11-05 03:50:33 +08:00
|
|
|
import { parse } from 'marked'
|
2021-09-24 01:19:18 +08:00
|
|
|
|
|
|
|
const props = defineProps({
|
2021-11-05 03:50:33 +08:00
|
|
|
content: { type: String, required: true },
|
2021-09-24 01:19:18 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
const attr = 'rel="noreferrer noopenner" target="_blank"'
|
|
|
|
|
|
|
|
const parsed = computed(() => {
|
|
|
|
// Note this is relatively arbitrary so that this could be buggy.
|
2021-11-05 03:50:33 +08:00
|
|
|
return parse(props.content)
|
2021-09-24 01:19:18 +08:00
|
|
|
.replace(
|
|
|
|
/#([0-9]+) by/g,
|
|
|
|
`<a href="https://github.com/element-plus/element-plus/pull/$1" ${attr}>#$1</a> by`
|
|
|
|
)
|
|
|
|
.replace(
|
|
|
|
/@([A-Za-z0-9_-]+)/g,
|
|
|
|
`<a href="https://github.com/$1" ${attr}>@$1</a>`
|
|
|
|
)
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div class="markdown-wrapper" v-html="parsed" />
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.markdown-wrapper h3 {
|
|
|
|
margin-top: 1rem;
|
|
|
|
}
|
|
|
|
</style>
|