Created simple markdown viewer

components.d.ts

@@ -130,6 +130,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']
+    MarkdownViewer: typeof import('./src/tools/markdown-viewer/markdown-viewer.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']
     MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']

package.json

@@ -78,6 +78,7 @@
     "pinia": "^2.0.34",
     "plausible-tracker": "^0.3.8",
     "qrcode": "^1.5.1",
+    "showdown": "^2.1.0",
     "sql-formatter": "^13.0.0",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",
@@ -108,6 +109,7 @@
     "@types/node": "^18.15.11",
     "@types/node-forge": "^1.3.2",
     "@types/qrcode": "^1.5.0",
+    "@types/showdown": "^2.0.6",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^9.0.0",
     "@unocss/eslint-config": "^0.57.0",

pnpm-lock.yaml

@@ -134,6 +134,9 @@ dependencies:
   qrcode:
     specifier: ^1.5.1
     version: 1.5.1
+  showdown:
+    specifier: ^2.1.0
+    version: 2.1.0
   sql-formatter:
     specifier: ^13.0.0
     version: 13.0.0
@@ -220,6 +223,9 @@ devDependencies:
   '@types/qrcode':
     specifier: ^1.5.0
     version: 1.5.0
+  '@types/showdown':
+    specifier: ^2.0.6
+    version: 2.0.6
   '@types/ua-parser-js':
     specifier: ^0.7.36
     version: 0.7.36
@@ -3062,6 +3068,10 @@ packages:
     resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
     dev: true
 
+  /@types/showdown@2.0.6:
+    resolution: {integrity: sha512-pTvD/0CIeqe4x23+YJWlX2gArHa8G0J0Oh6GKaVXV7TAeickpkkZiNOgFcFcmLQ5lB/K0qBJL1FtRYltBfbGCQ==}
+    dev: true
+
   /@types/throttle-debounce@2.1.0:
     resolution: {integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==}
     dev: false
@@ -4563,6 +4573,11 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
+  /commander@9.5.0:
+    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
+    engines: {node: ^12.20.0 || >=14}
+    dev: false
+
   /common-tags@1.8.2:
     resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
     engines: {node: '>=4.0.0'}
@@ -8112,6 +8127,13 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /showdown@2.1.0:
+    resolution: {integrity: sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==}
+    hasBin: true
+    dependencies:
+      commander: 9.5.0
+    dev: false
+
   /side-channel@1.0.4:
     resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
     dependencies:

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 markdownViewer } from './markdown-viewer';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -132,6 +133,7 @@ export const toolsByCategory: ToolCategory[] = [
       gitMemo,
       randomPortGenerator,
       crontabGenerator,
+      markdownViewer,
       jsonViewer,
       jsonMinify,
       jsonToCsv,

src/tools/markdown-viewer/index.ts

@@ -0,0 +1,12 @@
+import { ArrowsShuffle } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Markdown viewer',
+  path: '/markdown-viewer',
+  description: 'Effortlessly view Markdown files with enhanced readability and convenience',
+  keywords: ['markdown', 'viewer'],
+  component: () => import('./markdown-viewer.vue'),
+  icon: ArrowsShuffle,
+  createdAt: new Date('2023-12-02'),
+});

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

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - Markdown viewer', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/markdown-viewer');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Markdown viewer - IT Tools');
+  });
+
+  test('', async ({ page }) => {
+
+  });
+});

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

@@ -0,0 +1,6 @@
+import { expect, describe, it } from 'vitest';
+// import { } from './markdown-viewer.service';
+//
+// describe('markdown-viewer', () => {
+//
+// })

src/tools/markdown-viewer/markdown-viewer.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core';
+import showdown from 'showdown'
+import CCard from "@/ui/c-card/c-card.vue";
+
+const converter = new showdown.Converter()
+const inputElement = ref<HTMLElement>();
+const rawMd = useStorage('json-prettify:raw-json', '{"hello": "world", "foo": "bar"}');
+
+</script>
+
+<template>
+  <n-form-item
+      label="Your raw MD"
+  >
+    <c-input-text
+        ref="inputElement"
+        v-model:value="rawMd"
+        placeholder="Paste your raw JSON here..."
+        rows="35"
+        multiline
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+        monospace
+    />
+  </n-form-item>
+  <n-form-item label="Prettified version of your MD">
+    <c-card style="width: 100%; overflow: scroll" v-html="converter.makeHtml(rawMd)"></c-card>
+  </n-form-item>
+</template>
+
+<style lang="less" scoped>
+.result-card {
+  position: relative;
+  .copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}
+</style>