Comments (9)
Why not just use
<code>
for inline code and<pre>
for code blocks?
Because that wouldn't be semantically correct. The <code>
element doesn't imply formatting but <pre>
does.
FWIW here is how I differentiate the 2 in my code:
import { type Components } from 'react-markdown';
const Code: Components['code'] = ({ children, className = '', node }) => {
if (!node?.position || !children) {
console.error('Could not parse code node', node);
return <>{children}</>;
}
if (node.position.start.line === node.position.end.line) {
return <CodeInline>{children}</CodeInline>;
}
// NOTE Languages are passed down through the class name with `react-markdown`
const [, language] = className.split('-');
return <CodeBlock language={language || 'text'}>{children}</CodeBlock>;
};
Edit: I notice while posting this that GitHub doesn't use <code>
for code blocks. I don't know whether <code>
is just preferred or mandatory for accessibility topics though
from react-markdown.
I only meant to provide the most minimal context but after a good night's sleep I now see where my confusion comes from: within Markdown I can have inline code markup and code blocks. The former is content wrapped in code
, inline. While the latter would be a block element wrapped with pre
that contains itself a code
wrapper around the actual content.
Since I'm customizing the code
component from react-markdown
to handle both blocks and inline code markup your suggestion of rendering <pre>
with a fragment does make sense thanks for the suggestion.
from react-markdown.
micromark
, remark
, and react-markdown
follow the CommonMark standard https://spec.commonmark.org/0.31.2/
We are not going to break with the standard.
You are welcome to use plugins to customize the output to your liking. https://unifiedjs.com/learn/
from react-markdown.
Welcome @angrybacon! 👋
Sorry you ran into some confusion, the components prop is working as expected.
components
allow you to wrap the HTML markdown generates with custom elements.
For a codeblock markdown generates a <pre>
tag with a <code>
tag inside.
If you map the code tag to pre, then you do indeed get two <pre>
tags.
It's a bit hard to help because it's unclear what your end goal is.
If you want syntax highlighting, try the example you linked https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight
If you're looking for something else, please explain.
from react-markdown.
Hi! This was closed. Team: If this was fixed, please add phase/solved
. Otherwise, please add one of the no/*
labels.
from react-markdown.
This is relevant for cases like https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight where the horizontal scroll from react-syntax-highlighter is broken as a result.
I am already using this and their inline styles are applied to the pre
that they generate themselves, including the overflow
property. The extra pre
wrapper breaks the horizontal scroll. My current workaround is to force unwrapping pre
s specifically but I'd rather not have to do it.
<Markdown
...
disallowedElements={['pre']}
unwrapDisallowed
/>
from react-markdown.
Does that mean that I should instead customize the pre
component, extract the code
's children and use Prism
with that?
from react-markdown.
I am already using this and their inline styles are applied to the pre that they generate themselves, including the overflow property.
Okay, you aren't in the example you shared, but I think I follow.
My current workaround is to force unwrapping pres specifically
If you only want one level, one way or another you will need to unwrap.
you could do that in a rehype plugin, you could do that with disallows, or you could set the renderer for <pre>
to a Fragment.
From the limited information I have (this is still an XY problem https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem)
I'd recommend setting the component for <pre>
something like pre: ({children}) => (<>{children}</>)
Does that mean that I should instead customize the pre component, extract the code's children and use Prism with that?
You could do that too.
from react-markdown.
While I do follow, the way react-markdown
handles both of these does not seem correct. Why not just use <code>
for inline code and <pre>
for code blocks?
The issue here is that you aren't able to customize both inline code and code blocks separately, since react-markdown
places codeblocks in <pre><code>...</code></pre>
. If you render <pre>
as a Fragment, then your codeblocks are forced to use the same styles/props as inline code.
from react-markdown.
Related Issues (20)
- React 18.3.0/19.0.0 support for react-markdown ^6.0.0 HOT 2
- React-markdown isn't rendering phone number links anymore HOT 3
- rst support HOT 2
- Can't drag-over select text to copy a section HOT 3
- Headings and subheadings aren't getting rendered (NextJS 14/ChakraUI) HOT 3
- Invalid HTML syntax together with `rehype-raw` causes crash HOT 6
- Incorrect Languageless Code Block Rendering in Example HOT 12
- Identify `last-child` HOT 3
- Compatible with lower version browsers HOT 3
- TypeError: (0 , unist_util_visit__WEBPACK_IMPORTED_MODULE_1__.visit) is not a function HOT 3
- Syntex for showing underlined text HOT 3
- would it be avaliable for yarn HOT 2
- Support Automatic Link Detection and Hyperlinking HOT 4
- custom syntax and custom components are not working HOT 3
- github attached videos HOT 4
- Is it possible to prevent remounting of components (<ReactMarkdown components={...}>) when markdown changes? HOT 6
- Misidentify table contents HOT 4
- Unable to parse latex using rehypeKatex plugin HOT 7
- Can ReactMarkdown be used with react-lazy-load? HOT 2
- An error occurs with certain text when using `remarkMath` and `rehypeKatex`. HOT 8
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.