eyas / md-heading-id Goto Github PK
View Code? Open in Web Editor NEWSupport for Heading ID Markdown Extensions
License: MIT License
Support for Heading ID Markdown Extensions
License: MIT License
I am able to use your plugin with next-mdx-remote like so:
remarkPlugins: [
remarkGfm,
remarkHeadingId,
This works fine and renders to HTML correctly etc.
But when trying to run with remark-lint with the following in my remarkConfig:
"plugins": [
"remark-gfm",
"remark-custom-heading-id",
I am getting error Parsing error: Could not parse expression with acorn: Unexpected character '#'
First of all, thank you!
There are other packages that deal with this, but this is the only one I've found that works with MDX v2 (since {
and }
is reserved for jsx expressions. Maybe there should be some mentioning of this? I'll post a link to this package in other places too to let other people know about it.
Hey! Thanks for the package.
I'm trying to use remark-custom-heading-id with codehike, and it looks like it's broken regardless of which plugin comes first (if codehike first then acorn complains, if remark-custom-heading-id first, then codehike is broken).
I'd like to ditch codehike at some point, but if the delimiters could be customizable โ e.g. (# ...)
or [[# ...]
or // #
โ that would be very helpful.
Hi!
For some reason I can't get the Remark plugin working in VS Code :(
tsconfig.json
is configured to enable the remark-custom-heading-id
plugin as shown in the extension's readme.index.mdx
.No problems with the document.
Document parsing fails at index 0 with the error Cannot set properties of undefined (setting 'value')
. It appears to originate from this line in mdast-heading-id
.
Hello, hope you can still help me, I want to use the remark-custom-heading-id
to parse custom heading IDs, I'm using the mdxToMarkdown
to allow MDX expressions but that function doesn't allow me to use the custom heading id syntax {#custom-id}
. I'm using the following function to convert to MDX:
function mdxStringify(this: Processor) {
const compiler = (tree: Node): string => {
const markdown = toMarkdown(tree, {
extensions: [gfmToMarkdown(), mdxToMarkdown()],
bullet: "-",
emphasis: "_",
fences: true,
resourceLink: true,
});
return markdown;
};
Object.assign(this, { Compiler: compiler });
}
If I remove the mdxToMarkdown function it handles custom heading ids properly, but I need that function, so is there a way to add a the remark-custom-heading-id as a plugin in that function? Thanks in advance.
By the way, that code is used in the following one:
export async function processMarkdown(content: string): Promise<string> {
const preProcessed = preprocessingFixes(content);
const processed = await unified()
.use(remarkParse)
.use(remarkGfm)
.use(fixRogueHtml)
.use(mdxStringify)
.use(formatCodeLanguage)
.process(preProcessed);
const final = String(processed);
// Now, validate that we have valid MDX (throws exception if not)
await compile(final, { remarkPlugins: [remarkHeadingId] });
return final;
}
You can see I'm using the remarkHeadingId
as a plugin for the compiler but due to the mdxToMarkdown
the output is \{#custom-id}
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.