Comments (3)
Thanks for reaching out @MatthewCaseres!
I am curious how I should retrieve metadata from the code fence
The flow of data is:
react-remark
+---------------------------------------------------------------------------------------------------------------------------------------------+
| |
| +----------+ +----------------+ +---------------+ +----------------+ +--------------+ |
| | | | | | | | | | | |
| -markdown->+ remark +-mdast->+ remark plugins +-mdast->+ remark-rehype +-hast->+ rehype plugins +-hast->+ rehype-react +-react elements-> |
| | | | | | | | | | | |
| +----------+ +----------------+ +---------------+ +----------------+ +--------------+ |
| |
+---------------------------------------------------------------------------------------------------------------------------------------------+
it appears to be parsed by remark https://astexplorer.net/#/gist/70bd13086022edc1c2d4ddf08aaf37d4/53f8f650a5ed1aeb73dad23af9762cc765e946f0
and lost in the translation from mdast to hast remark-rehype
(mdast-util-to-hast
)
https://github.com/syntax-tree/mdast-util-to-hast/blob/914a6b77b9d363c588dcc6ef61f96053ec1b3b1e/lib/handlers/code.js
this can be handled by adding a custom handler for code to pass the meta https://github.com/syntax-tree/mdast-util-to-hast/tree/main#optionshandlers
Or, by raising an issue at https://github.com/syntax-tree/mdast-util-to-hast/issues to have the meta
field passed by default.
Also in your examples the rehypeReactOptions do not have createElement: React.createElement. This field seems to be required, do the docs need updating or am I missing something?
It isn't required.
This is tested in the stories https://github.com/ChristianMurphy/react-remark/blob/0fabb1526aca3f615baff8b9c94dce9fc114d9f3/stories/remark-component.stories.tsx (which can be tested live at https://christianmurphy.github.io/react-remark/?path=/story/*)
and in the unit tests
https://github.com/ChristianMurphy/react-remark/blob/0fabb1526aca3f615baff8b9c94dce9fc114d9f3/test/remark-component.test.tsx#L8
which are passing https://github.com/ChristianMurphy/react-remark/actions/runs/155491590
More information, likely in the form of a runnable example of the issue, would be needed to help track down what's going on in your setup.
from react-remark.
Thank you so much for the detailed answer. To clarify on the createElement comment, I am talking about the section in the bottom "Pass options" where you have
rehypeReactOptions: {
components: {
p: props => <p className="custom-paragraph" {...props} />,
},
},
I was saying I think that the pass options section should read like
rehypeReactOptions={{
createElement: React.createElement,
components: {
code: (props) => {
p: props => <p className="custom-paragraph" {...props} />,
},
},
}}
In @chrstianmurphy/react-remark/dist/index.d.ts there is rehypeReactOptions?: RehypeReactOptions<typeof createElement>;
where the options from rehype react are
interface Options<H extends CreateElementLike> {
createElement: H
...
TypeScript gives me an error when I omit createElement. I could not find any examples in the stories using rehypeReactOptions., Will provide reproducible example if needed.
from react-remark.
TypeScript gives me an error when I omit createElement
this has been resolved with #2 making createElement inside rehype-react optional
from react-remark.
Related Issues (14)
- fix `module` declaration in `package.json` HOT 1
- Server rendering/setting initial markdown state HOT 14
- Action Required: Fix Renovate Configuration
- Difference with react-markdown HOT 2
- Dependency Dashboard
- Struggling to get plugins working HOT 3
- Remark plugins are not working HOT 4
- Lots of console output about whitespace nodes in tables HOT 5
- Plugins don't work HOT 1
- Syntax highlighting example HOT 3
- Clarify status or archive? HOT 1
- Typing for custom components HOT 11
- Type conflict / Update to unified v10 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 react-remark.