feat: 支持 markdown 格式 (#77)
* feat: 支持 markdown 格式和图片 * perf: 重载的时候滚动条保持 * chore: version 2.5.2 * feat: 添加文字换行 * chore: 添加新封面 * chore: 更新 covermain
Redon
2 years ago
committed by
GitHub
parent
938c91f635
commit
ac9536ab87
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 518 KiB |
@ -0,0 +1,8 @@
|
||||
function includeCode(text: string | null | undefined) {
|
||||
const regexp = /^(?:\s{4}|\t).+/gm
|
||||
if (text?.includes(' = ') || text?.match(regexp))
|
||||
return true
|
||||
return false
|
||||
}
|
||||
|
||||
export default includeCode
|
||||
@ -1,28 +1,60 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { marked } from 'marked'
|
||||
import includeCode from '@/utils/functions/includeCode'
|
||||
|
||||
interface Props {
|
||||
inversion?: boolean
|
||||
error?: boolean
|
||||
text?: string
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const wrapClass = computed(() => {
|
||||
return [
|
||||
'text-wrap',
|
||||
'p-2',
|
||||
'min-w-[20px]',
|
||||
'rounded-md',
|
||||
props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
|
||||
{ 'text-red-500': props.error },
|
||||
]
|
||||
})
|
||||
|
||||
const text = computed(() => {
|
||||
if (props.text) {
|
||||
if (!includeCode(props.text))
|
||||
return marked.parse(props.text)
|
||||
return props.text
|
||||
}
|
||||
return ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="min-w-[20px] p-2 rounded-md"
|
||||
:class="[inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]', { 'text-red-500': error }]"
|
||||
>
|
||||
<span
|
||||
v-highlight
|
||||
class="leading-relaxed whitespace-pre-wrap"
|
||||
>
|
||||
<slot />
|
||||
</span>
|
||||
<div :class="wrapClass">
|
||||
<template v-if="loading">
|
||||
<span class="w-[3px] h-[20px] block animate-blink" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<code v-if="includeCode(text)" v-highlight class="leading-relaxed" v-text="text" />
|
||||
<div v-else class="leading-relaxed break-all" v-html="text" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style lang="less">
|
||||
.text-wrap{
|
||||
img{
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.hljs {
|
||||
background-color: #fff0 !important;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue