@wcj/markdown-to-html
Version:
Converts markdown text to HTML.
171 lines (152 loc) • 5.67 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convert HTML to Markdown</title>
<link rel="stylesheet" href="./marked.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.0/dist/katex.min.css">
<script src="https://unpkg.com/@wcj/dark-mode"></script>
<script type="module" src="https://unpkg.com/@uiw/github-corners/lib/index.js?module"></script>
<script type="text/javascript" src="./markdown.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
min-height: 100%;
cursor: default;
}
body {
max-width: 890px;
margin: 0 auto;
padding: 25px;
}
.math.math-inline {
background-color: transparent;
}
</style>
</head>
<body>
<github-corners target="__blank" position="fixed" href="https://github.com/jaywcjlove/markdown-to-html"></github-corners>
<dark-mode style="position: fixed; left: 10px; top: 8px;" light="light" dark="dark"></dark-mode>
<script>
;(() => {
const str = `# Markdown to HTML
[](https://github.com/jaywcjlove/markdown-to-html/actions/workflows/ci.yml)
[](https://www.jsdelivr.com/package/npm/@wcj/markdown-to-html)
[](https://www.npmjs.com/package/@wcj/markdown-to-html)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/@wcj/markdown-to-html/file/README.md)
Converts markdown text to HTML. [Github Source](https://github.com/jaywcjlove/markdown-to-html)\n\n
`;
const div = document.createElement('div');
div.className = 'markdown-body';
div.innerHTML = markdown.default(str)
document.body.appendChild(div)
})()
</script>
<br />
<script>
const str = `## API
\`\`\`typescript
import { PluggableList } from 'unified';
import { Options as RemarkRehypeOptions } from 'remark-rehype';
import { RehypeRewriteOptions, getCodeString } from 'rehype-rewrite';
export { getCodeString };
export interface Options {
/** [remark-rehype](https://github.com/remarkjs/remark-rehype) options */
remarkRehypeOptions?: RemarkRehypeOptions;
/** List of [remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins) to use. See the next section for examples on how to pass options */
remarkPlugins?: PluggableList;
/** List of [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins) to use. See the next section for examples on how to pass options */
rehypePlugins?: PluggableList;
/** Resulting Node tree. */
hastNode?: boolean;
/** Rewrite Element. [rehype-rewrite](https://github.com/jaywcjlove/rehype-rewrite#rewritenode-index-parent-void) */
rewrite?: RehypeRewriteOptions['rewrite'];
}
export default function markdown(markdownStr?: string, options?: Options): string | import("hast").Root;
\`\`\`
Or manually download and link \`markdown-to-html\` in your HTML, It can also be downloaded via [UNPKG](https://unpkg.com/browse/@wcj/markdown-to-html/):
\`\`\`html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.0/dist/katex.min.css" />
<link rel="stylesheet" href="https://unpkg.com/@wcj/markdown-to-html/dist/marked.css" />
<script type="text/javascript" src="https://unpkg.com/@wcj/markdown-to-html/dist/markdown.min.js"><\/script>
<script type="text/javascript">
;(() => {
const str = '# Markdown to HTML\\n\\nConverts markdown text to HTML.\\n\\n';
const div = document.createElement('div');
div.className = 'markdown-body';
div.innerHTML = markdown(str)
document.body.appendChild(div)
})()
<\/script>
\`\`\`
## Code Block
\`\`\`css
body {
color: red;
}
\`\`\`
\`\`\`swift
import SwiftUI
import Markdown
struct ContentView: View {
@State private var mdStr: String = \"\"\"
## Hello World
Render Markdown text in SwiftUI.
\"\"\"
var body: some View {
VStack {
Markdown(content: $mdStr)
TextEditor(text: $mdStr)
}
}
}
\`\`\`
\`KaTeX:c = \\pm\\sqrt{a^2 + b^2}\`
\`\`\`KaTeX
c = \\pm\\sqrt{a^2 + b^2}
L = \\frac{1}{2} \\rho v^2 S C_L
\`\`\`
\`\`\`diff
@@ -4,6 +4,5 @@
- let foo = bar.baz([1, 2, 3]);
- foo = foo + 1;
+ const foo = bar.baz([1, 2, 3]) + 1;
console.log(\`foo: \${foo}\`);
\`\`\`
- [ ] title 1
- [x] title 2
- [ ] title 3
- [ ] sub title 1
- [x] sub title 2
- [ ] sub title 3
- [ ] title 4
- [x] title 5
## Contributors
As always, thanks to our amazing contributors!
<script>alert('sss')<\/script>
<a href="https://github.com/jaywcjlove/markdown-to-html/graphs/contributors">
<img src="https://jaywcjlove.github.io/markdown-to-html/CONTRIBUTORS.svg" \/>
<\/a>
`;
const div = document.createElement('div');
div.className = 'markdown-body';
div.innerHTML = markdown.default(str)
document.body.appendChild(div)
</script>
<br />
<br />
<script>
;(() => {
const readmestr = `<%- markdownString.replace(/<\//g, '<\\/').replace(/\$\{/g, '$\\{').replace(/\`/g, '\\`').replace(/\\\\\`/g, '\\\\\\\\\`').replace(/\\n/g, '\\\\n').replace(/\\\\`/g, '\\`') %>`;
const div = document.createElement('div');
div.className = 'markdown-body';
div.innerHTML = markdown.default(readmestr)
document.body.appendChild(div)
})();
</script>
<br />
</body>
</html>