michael-klein / htmdx Goto Github PK
View Code? Open in Web Editor NEWHTMDX: Lightweight runtime for mdx-like markdown
License: MIT License
HTMDX: Lightweight runtime for mdx-like markdown
License: MIT License
I just realized that when a code block contains <
or >
characters, it is parsed as a tag, probably by htm
.
A reproducible case:
import { h } from "preact"
import { htmdx } from "htmdx"
const markdown = `
\`\`\` json
{
...,
"authors": [
"John Doe <[email protected]>"
],
...
}
\`\`\``
console.dir(htmdx(data, h), { depth: null })
Yields:
[ 'pre',
{ type: 'code',
props:
{ className: 'language-json',
children:
[ '{\n ...,\n "authors": [\n "John Doe ',
{ type: '[email protected]',
props: { children: '"\n ],\n ...\n}' },
key: null,
ref: null,
__k: null,
__: null,
__b: 0,
__e: null,
__d: null,
__c: null,
constructor: undefined } ] },
key: undefined,
ref: undefined,
__k: null,
__: null,
__b: 0,
__e: null,
__d: null,
__c: null,
constructor: undefined } ]
The type of the node is [email protected]
. Furthermore, the pre
is messed up.
Sorry for opening so many issues and PRs - I'm actively using your library, so I report the errors that I encounter ๐
The following Markdown:
# H1
---
# H2
... should translate to the following HTML:
<h1>H1</h1>
<hr />
<h2>H2</h2>
However, as Marked seems to omit the slash on self-closing tags by default, it get's converted to:
<h1>H1</h1>
<hr>
<h2>H2</h2>
htm
takes this input, cuts of everything before the <hr>
and returns:
hr<h2>H2</h2>
Setting xhtml: true
for Marked via configureMarked
solves the problem. Maybe we should add a note on this to the README and provide xhtml: true
as a default to Marked?
Currently it is very easy to just inject an iframe through this plugin. I'm fine with allowing some responsibility for the end-user, but I feel like iframes (among other) aren't part of the markdown spec and should thus be blacklisted by default.
Is this out of scope for this plugin?
Regards
index.js
import {htmdx} from "htmdx";
console.log({htmdx});
package.json
{
"name": "poop",
"version": "1.0.0",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"htmdx": "^0.3.7"
}
}
Running node index.js
produces the following error.
/Users/briankim/Clones/poop/node_modules/xhtm/index.js:1
import htm from './htm'
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/Users/briankim/Clones/poop/node_modules/htmdx/dist/htmdx.cjs.development.js:9:27)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.