<template>
  <div class="markdown-body" v-html="markdownContent">

  </div>
</template>

<script setup>
import 'github-markdown-css'
import 'highlight.js/styles/github.css'
import { getCurrentInstance, ref, watch } from 'vue';
import axios from 'axios';
// const proxy = getCurrentInstance()
import MarkdownIt from 'markdown-it';

const md = new MarkdownIt();
let markdownContent = ref("")
const props = defineProps({ src: String })
// console.log(props)
function loadMarkdown(url) {
  axios.get(url)
    .then(response => {
      markdownContent.value = md.render(response.data);
    })
    .catch(error => {
      console.error('Error loading markdown file:', error);
    });
}
watch(() => props.src, (newVal) => {
  // console.log(newVal)
  loadMarkdown(newVal)
}, { immediate: true })
</script>


<style lang="less" scoped>
.markdown-body {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding: 0px 10px;
}
</style>