Comments (2)
It looks like your rule
searches for a pattern anywhere in the source
. It should only look for tokens at the beginning. Try adding ^
at the beginning of the regexp
from marked.
It also looks like you are setting it as a block
level token which won't be inside a <p>
tag. You can change it to inline
to parse it as an inline token.
import { Marked } from "marked";
import "./styles.css";
document.getElementById("app").innerHTML = `
<h1>Hello Vanilla!</h1>
<div>
We use the same configuration as Parcel to bundle this sandbox, you can find more
info about Parcel
<a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
</div>`;
const marked = new Marked();
marked.use({
extensions: [
{
name: "customImage",
level: "inline",
start: (source: string) => {
return source.match(/!\[/)?.index;
},
tokenizer(source, tokens) {
const rule = /^!\[\]\((.+?)\){: width=(\d+?) }/;
const match = rule.exec(source);
if (match) {
const token = {
type: "customImage",
raw: match[0],
src: match[1],
width: match[2],
};
return token;
}
return undefined;
},
renderer(token) {
return `<img src="${token.src}" data-width="${token.width}" />`;
},
},
],
});
const rawText = `aaa
inline ![](imagelink){: width=50 }
ccc`;
const parsedText = marked.parse(rawText);
console.log(parsedText);
from marked.
Related Issues (20)
- Emphasis cannot be rendered HOT 3
- could not resolve module HOT 4
- Support unordered lists with hyphens (-) in addition to asterisks (*) HOT 1
- problem when inserting a picture HOT 1
- Ignoring elements click prop on conversion HOT 1
- [Question] lexer - a `space` betwen two lists HOT 4
- Fail to parse image tag under specific input. HOT 2
- Feature request: footnotes HOT 1
- **xx** -> strong label, There is a problem HOT 1
- Support for chunked rendering HOT 1
- Unexpected behavior when using `marked.lexer` or `new marked.Lexer` HOT 1
- marked 13: TypeError: Cannot read properties of undefined (reading 'header') at _Renderer.tablecell HOT 2
- compiled code,named # t and # e, which may cause errors in some versions of the browser. HOT 2
- Types for `this.parser` don't match notes of v13 release because `parser` is omitted HOT 3
- Incompatible/inconsistent types with `MarkedExtension` HOT 3
- Is it possible to create a custom extension using React Components (JSX)? HOT 1
- Possible bug with Renderer.link() HOT 2
- text in single ~ will be render del,but normally only text in ~~ should be render del HOT 7
- Renderer extension documentation seems incorrect? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from marked.