markdown-to-html

This commit is contained in:
steffenrapp 2024-08-27 16:28:27 +00:00
parent b986c49df6
commit a97e1897e5
4 changed files with 24 additions and 6 deletions

View file

@ -481,3 +481,11 @@ tools:
description: >- description: >-
Vereinheitlichen von E-Mail-Adressen auf ein Standardformat für einen Vereinheitlichen von E-Mail-Adressen auf ein Standardformat für einen
einfacheren Vergleich. Nützlich für Deduplizierung und Datenbereinigung. einfacheren Vergleich. Nützlich für Deduplizierung und Datenbereinigung.
markdown-to-html:
title: Markdown zu HTML
description: Markdown in HTML konvertieren und (als PDF) ausdrucken
markdown: 'Dein zu konvertierender Markdown-Inhalt:'
markdownInput: Dein Markdown-Inhalt...
html: 'HTML-Ausgabe:'
button:
print: Als PDF drucken

View file

@ -450,3 +450,11 @@ tools:
description: >- description: >-
Normalize email addresses to a standard format for easier comparison. Normalize email addresses to a standard format for easier comparison.
Useful for deduplication and data cleaning. Useful for deduplication and data cleaning.
markdown-to-html:
title: Markdown to HTML
description: Convert Markdown to HTML and allow to print (as PDF)
markdown: 'Your Markdown to convert:'
markdownInput: Your Markdown content...
html: 'Output HTML:'
button:
print: Print as PDF

View file

@ -1,10 +1,11 @@
import { Markdown } from '@vicons/tabler'; import { Markdown } from '@vicons/tabler';
import { defineTool } from '../tool'; import { defineTool } from '../tool';
import { translate } from '@/plugins/i18n.plugin';
export const tool = defineTool({ export const tool = defineTool({
name: 'Markdown to HTML', name: translate('tools.markdown-to-html.title'),
path: '/markdown-to-html', path: '/markdown-to-html',
description: 'Convert Markdown to Html and allow to print (as PDF)', description: translate('tools.markdown-to-html.description'),
keywords: ['markdown', 'html', 'converter', 'pdf'], keywords: ['markdown', 'html', 'converter', 'pdf'],
component: () => import('./markdown-to-html.vue'), component: () => import('./markdown-to-html.vue'),
icon: Markdown, icon: Markdown,

View file

@ -7,6 +7,7 @@ const outputHtml = computed(() => {
const md = markdownit(); const md = markdownit();
return md.render(inputMarkdown.value); return md.render(inputMarkdown.value);
}); });
const { t } = useI18n();
function printHtml() { function printHtml() {
const w = window.open(); const w = window.open();
@ -23,21 +24,21 @@ function printHtml() {
<c-input-text <c-input-text
v-model:value="inputMarkdown" v-model:value="inputMarkdown"
multiline raw-text multiline raw-text
placeholder="Your Markdown content..." :placeholder="t('tools.markdown-to-html.markdownInput')"
rows="8" rows="8"
autofocus autofocus
label="Your Markdown to convert:" :label="t('tools.markdown-to-html.markdown')"
/> />
<n-divider /> <n-divider />
<n-form-item label="Output HTML:"> <n-form-item :label="t('tools.markdown-to-html.html')">
<TextareaCopyable :value="outputHtml" :word-wrap="true" language="html" /> <TextareaCopyable :value="outputHtml" :word-wrap="true" language="html" />
</n-form-item> </n-form-item>
<div flex justify-center> <div flex justify-center>
<n-button @click="printHtml"> <n-button @click="printHtml">
Print as PDF {{ t('tools.markdown-to-html.button.print') }}
</n-button> </n-button>
</div> </div>
</div> </div>