mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-08 07:11:03 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Cleanup

Browse source
This commit is contained in:
Isaiah 2023-12-02 21:09:24 -05:00
parent ab414f0ea7
commit cf577bb7c9
5 changed files with 31 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/tools/markdown-viewer/index.ts
View file

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

15
src/tools/markdown-viewer/markdown-viewer.e2e.spec.ts
View file

@ -1,15 +0,0 @@
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 }) => {
});
});

6
src/tools/markdown-viewer/markdown-viewer.service.test.ts
View file

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

25
src/tools/markdown-viewer/markdown-viewer.service.ts
View file

@ -1,20 +1,19 @@
import { marked } from "marked"; import { marked } from 'marked';
import highlight from "highlight.js"; import highlight from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css'; import 'highlight.js/styles/atom-one-dark.css';
export const renderMarkdown = (md: string) => { export { renderMarkdown };
highlight.configure({
}) function renderMarkdown(md: string) {
const renderer = new marked.Renderer(); const renderer = new marked.Renderer();
// Override the code rendering function to use highlight.js for syntax highlighting // Override the code rendering function to use highlight.js for syntax highlighting
renderer.code = (code: string, language: string) => { renderer.code = (code: string, language: string) => {
const validLanguage = highlight.getLanguage(language) ? language : 'plaintext'; const validLanguage = highlight.getLanguage(language) ? language : 'plaintext';
return `<pre><code class="hljs ${validLanguage}">${highlight.highlight(validLanguage, code).value}</code></pre>`; return `<pre><code class="hljs ${validLanguage}">${highlight.highlight(validLanguage, code).value}</code></pre>`;
}; };
marked.use({ renderer }); marked.use({ renderer });
return marked.parse(md) return marked.parse(md);
} }

41
src/tools/markdown-viewer/markdown-viewer.vue
View file

@ -1,40 +1,29 @@
<script setup lang="ts"> <script setup lang="ts">
import { useStorage } from '@vueuse/core'; import { useStorage } from '@vueuse/core';
import { renderMarkdown } from './markdown-viewer.service';
const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World'); const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
const inputElement = ref<HTMLElement>(); const inputElement = ref<HTMLElement>();
import { renderMarkdown } from "./markdown-viewer.service";
</script> </script>
<template> <template>
<n-form-item <n-form-item
label="Your raw MD" label="Your raw markdown"
> >
<c-input-text <c-input-text
ref="inputElement" ref="inputElement"
v-model:value="rawMd" v-model:value="rawMd"
placeholder="Paste your raw JSON here..." placeholder="Paste your raw markdown here..."
rows="35" rows="35"
multiline multiline
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
autocapitalize="off" autocapitalize="off"
spellcheck="false" spellcheck="false"
monospace monospace
/> />
</n-form-item> </n-form-item>
<n-form-item label="Prettified version of your MD"> <n-form-item label="Prettified version of your markdown">
<c-card style="width: 100%; overflow: scroll" v-html="renderMarkdown(rawMd)"></c-card> <c-card style="width: 100%; overflow: scroll" v-html="renderMarkdown(rawMd)" />
</n-form-item> </n-form-item>
</template> </template>
<style lang="less" scoped>
.result-card {
position: relative;
.copy-button {
position: absolute;
top: 10px;
right: 10px;
}
}
</style>