87984e2081
* feat(new tool): Markdown to HTML Fix partially #538 * feat: add print button * Update src/tools/markdown-to-html/index.ts * Update src/tools/markdown-to-html/markdown-to-html.vue --------- Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>
45 lines
948 B
Vue
45 lines
948 B
Vue
<script setup lang="ts">
|
|
import markdownit from 'markdown-it';
|
|
import TextareaCopyable from '@/components/TextareaCopyable.vue';
|
|
|
|
const inputMarkdown = ref('');
|
|
const outputHtml = computed(() => {
|
|
const md = markdownit();
|
|
return md.render(inputMarkdown.value);
|
|
});
|
|
|
|
function printHtml() {
|
|
const w = window.open();
|
|
if (w === null) {
|
|
return;
|
|
}
|
|
w.document.body.innerHTML = outputHtml.value;
|
|
w.print();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<c-input-text
|
|
v-model:value="inputMarkdown"
|
|
multiline raw-text
|
|
placeholder="Your Markdown content..."
|
|
rows="8"
|
|
autofocus
|
|
label="Your Markdown to convert:"
|
|
/>
|
|
|
|
<n-divider />
|
|
|
|
<n-form-item label="Output HTML:">
|
|
<TextareaCopyable :value="outputHtml" :word-wrap="true" language="html" />
|
|
</n-form-item>
|
|
|
|
<div flex justify-center>
|
|
<n-button @click="printHtml">
|
|
Print as PDF
|
|
</n-button>
|
|
</div>
|
|
</div>
|
|
</template>
|