temp
This commit is contained in:
@@ -1,3 +1,5 @@
|
|||||||
|
import { md2html } from "./md";
|
||||||
|
import { css } from "./md-css";
|
||||||
class MDPreview extends HTMLElement {
|
class MDPreview extends HTMLElement {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
@@ -8,27 +10,24 @@ class MDPreview extends HTMLElement {
|
|||||||
this.render();
|
this.render();
|
||||||
}
|
}
|
||||||
getContent() {
|
getContent() {
|
||||||
console.log('MDPreview getContent called');
|
|
||||||
console.log('Inner HTML:', this.innerHTML);
|
|
||||||
const isAstro = this.isAstro();
|
const isAstro = this.isAstro();
|
||||||
console.log('Is Astro:', isAstro);
|
|
||||||
console.log('Text Content:', this.textContent, this);
|
|
||||||
if(isAstro) {
|
if(isAstro) {
|
||||||
const astro = this.querySelector('astro-slot');
|
const astro = this.querySelector('astro-slot');
|
||||||
if(astro) {
|
if(astro) {
|
||||||
console.log('Found astro-slot:', astro);
|
|
||||||
return astro.innerHTML;
|
return astro.innerHTML;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return this.innerHTML;
|
return this.innerHTML;
|
||||||
}
|
}
|
||||||
|
getHtml() {
|
||||||
|
const markdown = this.getContent();
|
||||||
|
return md2html(markdown);
|
||||||
|
}
|
||||||
isAstro() {
|
isAstro() {
|
||||||
return this.hasAttribute('is-astro');
|
return this.hasAttribute('is-astro');
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
// console.log('MDPreview render called');
|
const content = this.getHtml();
|
||||||
const content = this.getContent();
|
|
||||||
console.log('Content to render:', content);
|
|
||||||
this.shadowRoot!.innerHTML = `
|
this.shadowRoot!.innerHTML = `
|
||||||
<style>
|
<style>
|
||||||
/* Styles for markdown preview */
|
/* Styles for markdown preview */
|
||||||
@@ -36,9 +35,14 @@ class MDPreview extends HTMLElement {
|
|||||||
display: block;
|
display: block;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
${css}
|
||||||
</style>
|
</style>
|
||||||
<div id="preview">
|
<div id="preview" class="markdown-body">
|
||||||
<!-- Markdown content will be rendered here -->
|
<!-- Markdown content will be rendered here -->
|
||||||
${content}
|
${content}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
1
src/apps/md-preview/md-css.ts
Normal file
1
src/apps/md-preview/md-css.ts
Normal file
File diff suppressed because one or more lines are too long
26
src/apps/md-preview/md.ts
Normal file
26
src/apps/md-preview/md.ts
Normal 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,7 +2,7 @@ import './index.ts';
|
|||||||
|
|
||||||
export const App = (props) => {
|
export const App = (props) => {
|
||||||
return (
|
return (
|
||||||
<div style={{ display: 'contents' }}>
|
<div className='flex justify-center justify-self-center w-[800px] '>
|
||||||
{/* @ts-ignore */}
|
{/* @ts-ignore */}
|
||||||
<md-preview is-astro>{props.children}</md-preview>
|
<md-preview is-astro>{props.children}</md-preview>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,10 +4,50 @@ import { App } from '@/apps/md-preview/react.tsx';
|
|||||||
---
|
---
|
||||||
|
|
||||||
<Html>
|
<Html>
|
||||||
|
<slot name="head">
|
||||||
|
<style is:global>
|
||||||
|
.markdown-body h2 {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
#preview h2 {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</slot>
|
||||||
<main>
|
<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>
|
<div>this is div</div>
|
||||||
|
|
||||||
</App>
|
</App>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
</Html>
|
</Html>
|
||||||
|
|||||||
Reference in New Issue
Block a user