src/components/MarkdownView/index.vue

@@ -34,8 +34,16 @@

/** 渲染 markdown */
const renderedMarkdown = computed(() => {
  return md.render(props.content)
  return formatContent(props.content)
})

/** 保留换行符 */
const formatContent = (text) => {
  if (text) {
    return text.replace(/\n/g, '<br>')
  }
  return text
}

/** 初始化 **/
onMounted(async () => {
@@ -51,14 +59,25 @@

<style lang="scss">
.markdown-view {
  font-family: PingFang SC;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6rem;
  letter-spacing: 0em;
  text-align: left;
  color: #3b3e55;
  max-width: 100%;
  overflow-y: auto;        /* 垂直方向溢出时显示滚动条 */
  overflow-x: hidden;      /* 水平方向隐藏滚动条 */

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;

  /* WebKit */
  &::-webkit-scrollbar {
    width: 6px;
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.15);
    transition: background 0.3s;
    &:hover { background: rgba(0, 0, 0, 0.25); }
  }

  pre {
    position: relative;