replace unmaintained markdown-it-vue with simpler markdown-it component

This commit is contained in:
Jonathan Shook 2020-09-16 22:57:03 -05:00
parent 366c4d44c6
commit 58afb5a171
2 changed files with 21 additions and 46 deletions

View File

@ -1,58 +1,31 @@
<template>
<!-- <v-main fluid class="d-block">-->
<!-- <markdown-it-vue class="d-block" :content="mdcontent" :options="mdoptions"/>-->
<markdown-it-vue class="md-body" ref="myMarkdownItVue" :content="mdcontent" :options="options"/>
<!-- </v-main>-->
<div class="markdown-body" v-html="rendered"></div>
</template>
<script>
import MarkdownItVue from 'markdown-it-vue'
// https://www.npmjs.com/package/markdown-it-replace-link
// https://www.npmjs.com/package/markdown-it-relativelink
// import 'markdown-it-link-attributes'
// import 'markdown-it-relativelink'
// let mireli = require('markdown-it-relativelink')({prefix: 'http://example.com/'})
import 'markdown-it-replace-link'
let mireplink = require('markdown-it-replace-link')
import "markdown-it"
import "markdown-it-imsize"
let mdit = require('markdown-it')({
html: true,
linkify: true,
typography: true
}).use(require('markdown-it-imsize'))
export default {
name: "MarkdownVue",
components: {MarkdownItVue},
mounted() {
let mmd = this.$refs.myMarkdownItVue;
mmd.use(mireplink);
// mmd.use(mirl)
// console.log("typeof(mmd):" + typeof (mmd))
},
// data() {
// let options = {
// markdownIt: {
// linkify: true
// },
// linkAttributes: {
// attrs: {
// target: '_blank',
// rel: 'noopener'
// }
// },
// replaceLink: function(link, env) {
// return "LINK:" + link;
// }
// }
// return {options}
// },
props: {
mdcontent: String,
options: {
testing: "one two three"
mdcontent: String
},
computed: {
rendered() {
let rendered = mdit.render(this.mdcontent);
// console.log("got rendered:" + rendered.length + " characters")
return rendered
}
}
}
</script>
<style>
.v-application code {

View File

@ -92,21 +92,23 @@ export default {
let categories = await store.getters["docs/getCategories"]
let active_category = docpaths.getCategory(route, categories);
let active_topic = docpaths.getTopic(route, categories, active_category);
let markdown_body = active_topic.content;
// console.log("markdown_body is " + markdown_body.length + " characters")
return {
active_category,
active_topic,
markdown_body: active_topic.content
markdown_body: markdown_body
}
},
methods: {
async toggleDrawer() {
this.isDrawerOpen=!this.isDrawerOpen;
// await this.$store.dispatch("docs/setIsDrawerOpen", this.$store.getters["docs/getIsDrawerOpen"])
console.log("toggled drawer, now " + this.isDrawerOpen)
// console.log("toggled drawer, now " + this.isDrawerOpen)
},
menuChanged(evt) {
console.log("menu changed:" + JSON.stringify(evt, null, 2))
// console.log("menu changed:" + JSON.stringify(evt, null, 2))
this.$forceUpdate()
}
}