Created simple markdown viewer

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>