web-components/md-preview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

temp

Browse Source
This commit is contained in:
熊潇
2025-11-10 15:42:44 +08:00
parent d759dbed6d
commit 090379b9d2
5 changed files with 82 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/apps/md-preview/index.ts
View File

@@ -1,3 +1,5 @@
import { md2html } from "./md";
import { css } from "./md-css";
class MDPreview extends HTMLElement {
constructor() {
super();
@@ -8,27 +10,24 @@ class MDPreview extends HTMLElement {
this.render();
}
getContent() {
console.log('MDPreview getContent called');
console.log('Inner HTML:', this.innerHTML);
const isAstro = this.isAstro();
console.log('Is Astro:', isAstro);
console.log('Text Content:', this.textContent, this);
if(isAstro) {
const astro = this.querySelector('astro-slot');
if(astro) {
console.log('Found astro-slot:', astro);
return astro.innerHTML;
}
}
return this.innerHTML;
}
getHtml() {
const markdown = this.getContent();
return md2html(markdown);
}
isAstro() {
return this.hasAttribute('is-astro');
}
render() {
// console.log('MDPreview render called');
const content = this.getContent();
console.log('Content to render:', content);
const content = this.getHtml();
this.shadowRoot!.innerHTML = `
<style>
/* Styles for markdown preview */
@@ -36,9 +35,14 @@ class MDPreview extends HTMLElement {
display: block;
padding: 1em;
font-family: Arial, sans-serif;
width: 100%;
box-sizing: border-box;
height: 100%;
overflow: auto;
}
${css}
</style>
<div id="preview">
<div id="preview" class="markdown-body">
<!-- Markdown content will be rendered here -->
${content}
</div>

1
src/apps/md-preview/md-css.ts Normal file
View File

File diff suppressed because one or more lines are too long

26
src/apps/md-preview/md.ts Normal file
View File

@@ -0,0 +1,26 @@
import { Marked } from 'marked';
import hljs from 'highlight.js';
import { markedHighlight } from 'marked-highlight';
const markedAndHighlight = new Marked(
markedHighlight({
emptyLangClass: 'hljs',
langPrefix: 'hljs language-',
highlight(code, lang, info) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
},
}),
);
export const md2html = (md: string) => {
const html = markedAndHighlight.parse(md);
return html;
};
export const clearMeta = (markdown?: string) => {
if (!markdown) return '';
// Remove YAML front matter if present
const yamlRegex = /^---\n[\s\S]*?\n---\n/;
return markdown.replace(yamlRegex, '');
};

2
src/apps/md-preview/react.tsx
View File

@@ -2,7 +2,7 @@ import './index.ts';
export const App = (props) => {
return (
<div style={{ display: 'contents' }}>
<div className='flex justify-center justify-self-center w-[800px] '>
{/* @ts-ignore */}
<md-preview is-astro>{props.children}</md-preview>
</div>

42
src/pages/md.astro
View File

@@ -4,10 +4,50 @@ import { App } from '@/apps/md-preview/react.tsx';
---
<Html>
<slot name="head">
<style is:global>
.markdown-body h2 {
color: red;
}
#preview h2 {
color: blue;
}
</style>
</slot>
<main>
<App client:only># acb
<App client:only>
# acb
内容
## sf
- [ ] todo
## 123
- 1水电费
- 2是的
## 23
1. 12
2. 323
4. 434
---
## 哈哈
### 水电放放风
*水滚滚滚各位*
_sdf_
<div>this is div</div>
</App>
</main>
</Html>