Questions tagged [react-syntax-highlighter]
The react-syntax-highlighter tag has no usage guidance.
20
questions
9
votes
2
answers
9k
views
Is there a simple way to apply a custom theme to react-syntax-highlighter?
I've been trying to generate a snippet of code on my website on a rendered text editor using react-syntax-highlighter. I've spent a while using this plugin and love it, however I've come across an ...
- 301
3
votes
3
answers
2k
views
Cannot using React Syntax Highlighter in Next.js 13 & Sanity v3
Hello i have a problem for my project using Sanity v3 and React Syntax Highlighter. When i use Refactor library for showing my code in the browser it works by looking a tutorial in Code Input by ...
3
votes
1
answer
2k
views
Reactmarkdown can not escape quotes and backticks
I have the code below which helps me display markdowns component with syntax highlighting. Everything works fine except when I input ``` which is always going to happen because am taking the markdown ...
- 7,360
2
votes
1
answer
5k
views
React-markdown and react-syntax-highlighter
I'm building a blog with ReactMarkdown, and I want to render a custom component for the code blocks:
<ReactMarkdown
children={content}
rehypePlugins={[rehypeRaw]}
components={{
code({ ...
2
votes
1
answer
3k
views
Using syntax highlighter with tsx react markdown
I'm following the Github https://github.com/remarkjs/react-markdown and am trying to add SyntaxHighlighter to my markdown code snippets. I'm getting an error mentioned below when trying to use the ...
- 33
2
votes
0
answers
464
views
How to add filename or title in react syntax hightligting
Hi I've successfully add react syntax hightlight to my project that using gatsbyjs and strapi, from strapi the content was formatted in markdown so i've add react-markdown and react-syntax-hightlight ...
- 441
2
votes
0
answers
914
views
Is it possible to highlight specific characters in a line using react-syntax-highlighter?
I created the following React component. It implements react-syntax-highlighter:
import React from "react";
import { PrismAsyncLight as SyntaxHighlighter } from "react-syntax-...
- 4,673
1
vote
3
answers
2k
views
React how to apply style inside jsx
I am using react-syntax-highlighter and I am having one problem I am trying to write some styles inside jsx namely paddingLeft: 0. But the problem is that the syntax theme is specified inside style, ...
- 1,203
1
vote
1
answer
1k
views
Why are styles from react-syntax-highlighter/dist/esm/styles/prism not working as expected?
this my code
import SyntaxHighlighter from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
const App = () => {
const ...
- 6,468
1
vote
1
answer
2k
views
Highlight.js not working with react-markdown
I am using [email protected] for syntax highlighting. Below is the code:
import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { ...
- 165
1
vote
2
answers
218
views
Everything after the react fragment comes in the same color in VS Code (React Fragment)
As the arrow shows .. everything after the closed fragment comes in the same weird color, at the beginning I thought it might be a theme issue but then I recognized that it is not. I really need a ...
1
vote
0
answers
106
views
anyone know how i remove this border of react-syntax-highlighter?
i have this structure and need remove the borders/lines that are rendered
<ReactMarkdown
className="w-100"
children={text}
remarkPlugins={[gfm]}
...
0
votes
2
answers
432
views
How can I import a JS file with special characters in it's name in React and JSX?
How can I import a JS file with special characters in it's name in React and JSX?
I can
import { tomorrow} from 'react-syntax-highlighter/dist/esm/styles/hljs';
(the folder contains tomorrow.js and ...
- 144
0
votes
1
answer
2k
views
Highlighting curl code snippet in react syntax highlighter
I was trying to highlight curl code snippet in my react application.
I am using react-syntax-highlighter for the same.
The problem, curl code is not coming properly aligned. below my code snippet.
...
- 379
0
votes
1
answer
366
views
React Syntax Highlighter only highlighting JS code
I want to highlight some Ruby code, but for the life of me, its not working. In fact, it only seems to highlight JavaScript.
import React from "react";
import atom from "node_modules/...
- 126
0
votes
1
answer
1k
views
react-syntax-highlighter is not working with TailwindCSS
I am displaying sanity block content using [@sanity/block-content-to-react](@sanity/block-content-to-react). The BlockContent component is wrapper by div with class of "prose".
<div ...
- 35
0
votes
0
answers
34
views
react-syntax-highlighter dont work with react-markdown
I want to program an article reader
I use react-markdown and to style <code> I use react-syntax-highlighter
All articles and explanations use:
<ReactMarkdown className={'mark'} source={input} ...
0
votes
0
answers
16
views
How to get the language name for md codeBlock rendring
i am using electron, react. and I am using codemirror to make a
editor to edit markdown files. I am also using remark to render the Markdown file in real time. for some reason the syntax highlighting ...
0
votes
0
answers
64
views
react-syntax-highlighter style(theme). The style is not what I intended and different from Demo
I'm using react-syntax-highlighter for .md file.
So, I selected style(theme) from library, but it's quite different from Demo style.
Demo:
My .md file:
and my code:
import SyntaxHighlighter from &...
- 49
-1
votes
1
answer
244
views
how to import file with special character in name [duplicate]
How can I import a file with special characters in it's name in ES6?
I can
import { tomorrow} from 'react-syntax-highlighter/dist/esm/styles/hljs';
but I can't:
import { tomorrow-night} from 'react-...
- 144