feat(new tool): Markdown to HTML (#916)

* 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>
This commit is contained in:
sharevb 2024-08-25 22:57:07 +02:00 committed by GitHub
parent 318fb6efb9
commit 87984e2081
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 115 additions and 10 deletions

View file

@ -0,0 +1,44 @@
<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>