rehype
truncate rendered markdown with react-markdown #192
-
|
Maybe I am not using it right, but I was trying to truncate the text from my markdown using import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeInferDescriptionMeta from "rehype-infer-description-meta";
const markdownContent =
const component = () => {
return (
<Markdown
disallowedElements={
previewLines
? ["h1", "h2", "h3", "h4", "h5", "h6", "hr"]
: []
}
unwrapDisallowed
remarkPlugins={[remarkGfm]}
rehypePlugins={[
[rehypeInferDescriptionMeta, { truncateSize: 10 }],
]}
>
{markdownContent}
</Markdown>
)
}versions:
What am i doing wrong? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 8 replies
-
|
@benjaminpreiss Your example doesn't make much sense. Take some time to frame your question to help us help you https://github.com/rehypejs/.github/blob/main/support.md |
Beta Was this translation helpful? Give feedback.
-
|
Sorry! I meant no disrespect - I admire the work of you open-source maintainers! I just wasn't sure if there is a mistake in how I apply the plugins... |
Beta Was this translation helpful? Give feedback.
-
Rendered output of the
Right <html lang="en">
<head>
<script type="module">
import RefreshRuntime from "/@react-refresh";
RefreshRuntime.injectIntoGlobalHook(window);
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => (type) => type;
window.__vite_plugin_react_preamble_installed__ = true;
</script>
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root">
10 chars .
<p>this sentence should be truncated.</p>
</div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>without a meta tag. because of how react works as I mentioned above
You need to address that before worrying about truncation. |
Beta Was this translation helpful? Give feedback.
-
|
Ah, seems I misunderstood the plugin rehype-infer-description-meta... Looking at the name, it absolutely makes sense that it adds things to the meta tag 😅🫣 |
Beta Was this translation helpful? Give feedback.
-
|
There are lots of plugins that could help https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins 🙂 |
Beta Was this translation helpful? Give feedback.
-
|
Also taking another step back is truncation what you want? |
Beta Was this translation helpful? Give feedback.
-
|
Firstly, yes, that is exactly what I am looking for! Thank you so much!
Secondly, yes I might need that in the future - so if you could point me in the right direction I'd be very grateful! |
Beta Was this translation helpful? Give feedback.
-
|
I will change the title of this discussion to "truncate rendered markdown with react-markdown" |
Beta Was this translation helpful? Give feedback.
-
There are a few approaches in https://github.com/orgs/unifiedjs/discussions/109 |
Beta Was this translation helpful? Give feedback.
There are lots of plugins that could help https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins 🙂
It sounds like you're looking for something more like https://github.com/luk707/rehype-truncate ?