vp-markdown.vue 786 B

123456789101112131415161718192021222324252627282930313233343536
  1. <script lang="ts" setup>
  2. import { computed } from 'vue'
  3. import MarkdownIt from 'markdown-it'
  4. const md = new MarkdownIt()
  5. const props = defineProps({
  6. content: { type: String, required: true },
  7. })
  8. const attr = 'rel="noreferrer noopenner" target="_blank"'
  9. const parsed = computed(() => {
  10. // Note this is relatively arbitrary so that this could be buggy.
  11. return md
  12. .render(props.content)
  13. .replace(
  14. /#([0-9]+) by/g,
  15. `<a href="https://github.com/element-plus/element-plus/pull/$1" ${attr}>#$1</a> by`
  16. )
  17. .replace(
  18. /@([A-Za-z0-9_-]+)/g,
  19. `<a href="https://github.com/$1" ${attr}>@$1</a>`
  20. )
  21. })
  22. </script>
  23. <template>
  24. <div class="markdown-wrapper" v-html="parsed" />
  25. </template>
  26. <style>
  27. .markdown-wrapper h3 {
  28. margin-top: 1rem;
  29. }
  30. </style>