added markdown preview feature

components.d.ts

@@ -90,17 +90,28 @@ declare module '@vue/runtime-core' {
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
+    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
+    IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
+    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
+    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
     IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
+    IconMdiDownload: typeof import('~icons/mdi/download')['default']
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
     IconMdiHeart: typeof import('~icons/mdi/heart')['default']
+    IconMdiPause: typeof import('~icons/mdi/pause')['default']
+    IconMdiPlay: typeof import('~icons/mdi/play')['default']
+    IconMdiRecord: typeof import('~icons/mdi/record')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
     IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
+    IconMdiVideo: typeof import('~icons/mdi/video')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
@@ -121,6 +132,7 @@ declare module '@vue/runtime-core' {
     LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
     MacAddressGenerator: typeof import('./src/tools/mac-address-generator/mac-address-generator.vue')['default']
     MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
+    MarkdownPreview: typeof import('./src/tools/markdown-preview/markdown-preview.vue')['default']
     MarkdownToHtml: typeof import('./src/tools/markdown-to-html/markdown-to-html.vue')['default']
     MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
     MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
@@ -129,20 +141,42 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NButton: typeof import('naive-ui')['NButton']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDivider: typeof import('naive-ui')['NDivider']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
+    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
+    NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NProgress: typeof import('naive-ui')['NProgress']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSlider: typeof import('naive-ui')['NSlider']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
+    NTag: typeof import('naive-ui')['NTag']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as markdownPreview } from './markdown-preview';
 import { tool as emailNormalizer } from './email-normalizer';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
@@ -116,6 +117,7 @@ export const toolsByCategory: ToolCategory[] = [
       xmlToJson,
       jsonToXml,
       markdownToHtml,
+      markdownPreview,
     ],
   },
   {

src/tools/markdown-preview/index.ts

@@ -0,0 +1,12 @@
+import { Markdown } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Markdown preview',
+  path: '/markdown-preview',
+  description: 'Live preview of Markdown as you type',
+  keywords: ['markdown', 'preview'],
+  component: () => import('./markdown-preview.vue'),
+  icon: Markdown,
+  createdAt: new Date('2026-03-17'),
+});

src/tools/markdown-preview/markdown-preview.e2e.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - Markdown preview', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/markdown-preview');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Markdown preview - IT Tools');
+  });
+
+  test('renders markdown in preview as user types', async ({ page }) => {
+    await page.getByTestId('markdown-input').fill('# Hello World\n\n**Bold** and *italic*');
+    const preview = page.getByTestId('markdown-preview');
+    await expect(preview.locator('h1')).toHaveText('Hello World');
+    await expect(preview.locator('strong')).toHaveText('Bold');
+    await expect(preview.locator('em')).toHaveText('italic');
+  });
+});

src/tools/markdown-preview/markdown-preview.service.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { renderMarkdown } from './markdown-preview.service';
+
+describe('markdown-preview', () => {
+  it('renders markdown to html', () => {
+    expect(renderMarkdown('# Hello')).toContain('<h1>Hello</h1>');
+    expect(renderMarkdown('**bold**')).toContain('<strong>bold</strong>');
+    expect(renderMarkdown('*italic*')).toContain('<em>italic</em>');
+  });
+
+  it('renders empty string as empty', () => {
+    expect(renderMarkdown('')).toBe('');
+  });
+
+  it('sanitizes script tags', () => {
+    const result = renderMarkdown('<script>alert("xss")</script>');
+    expect(result).not.toContain('<script>');
+  });
+});

src/tools/markdown-preview/markdown-preview.service.ts

@@ -0,0 +1,9 @@
+import markdownit from 'markdown-it';
+import DomPurify from 'dompurify';
+
+const md = markdownit();
+
+export function renderMarkdown(markdown: string): string {
+  const html = md.render(markdown);
+  return DomPurify.sanitize(html, { ADD_ATTR: ['target'] });
+}

src/tools/markdown-preview/markdown-preview.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core';
+import { renderMarkdown } from './markdown-preview.service';
+
+const inputMarkdown = useStorage('markdown-preview:input', '');
+const previewHtml = computed(() => renderMarkdown(inputMarkdown.value));
+</script>
+
+<template>
+  <div class="markdown-preview-tool">
+    <c-input-text
+      v-model:value="inputMarkdown"
+
+      placeholder="Your Markdown content..."
+      rows="8"
+
+      label="Your Markdown to preview:"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      raw-text autofocus multiline monospace
+      test-id="markdown-input"
+    />
+
+    <n-divider />
+
+    <n-form-item label="Rendered preview:">
+      <c-card>
+        <div
+          class="markdown-preview"
+          data-test-id="markdown-preview"
+          v-html="previewHtml"
+        />
+      </c-card>
+    </n-form-item>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.markdown-preview-tool {
+  flex: 0 0 100%;
+}
+
+.markdown-preview {
+  overflow: auto;
+  width: 100%;
+  min-height: 200px;
+  max-height: 600px;
+  box-sizing: border-box;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  :deep(h1) { font-size: 1.5em; }
+  :deep(h2) { font-size: 1.3em; }
+  :deep(h3) { font-size: 1.1em; }
+  :deep(h1), :deep(h2), :deep(h3) { margin: 0.5em 0; line-height: 1.3; }
+  :deep(p), :deep(ul), :deep(ol) { margin: 0.5em 0; line-height: 1.6; }
+  :deep(ul), :deep(ol) { padding-left: 1.5em; }
+  :deep(code) { background: var(--n-color-modal); padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; }
+  :deep(pre) { background: var(--n-color-modal); padding: 12px; border-radius: 6px; overflow-x: auto; margin: 0.5em 0; }
+  :deep(pre code) { background: none; padding: 0; font-size: 0.9em; }
+  :deep(a) { color: var(--n-color-primary); text-decoration: none; }
+  :deep(a:hover) { text-decoration: underline; }
+}
+</style>