Questions tagged [react-syntax-highlighter]
19 questions
6
votes
2 answers
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 issue I can't find an answer to. I want to change…
frost2709
- 131
- 1
- 5
3
votes
1 answer
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 source from an input field.
const renderers = {
…
Norbert
- 6,874
- 14
- 40
- 65
2
votes
0 answers
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 to handle rendering and syntax hightlighting in…
Rief
- 371
- 2
- 10
1
vote
0 answers
anyone know how i remove this border of react-syntax-highlighter?
i have this structure and need remove the borders/lines that are rendered
Yan Cerqueira
- 11
- 1
1
vote
3 answers
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 Sanity
But when i want to using React Syntax…
M Muqiit Faturrahman
- 79
- 12
1
vote
2 answers
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 solution for this.
I'm new to react by the way
I…
Muhammed Said
- 21
- 3
1
vote
0 answers
React-markdown and react-syntax-highlighter
how are you? I'm building a blog with ReactMarkdown, and I want to render a custom component for the code blocks:
Emiliano Yaryura
- 11
- 1
- 2
1
vote
1 answer
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 example code inside a function which I use to render…
hyl3rid
- 23
- 1
- 5
1
vote
1 answer
Highlight.js not working with react-markdown
I am using react-syntax-highlighter@15.4.3 for syntax highlighting. Below is the code:
import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import {…
Gratis Devs
- 155
- 9
1
vote
0 answers
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-highlighter";
import { coy } from…
JackH
- 4,613
- 4
- 36
- 61
1
vote
3 answers
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, it looks like this
Synchro
- 1,105
- 3
- 14
- 44
0
votes
1 answer
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/react-syntax-highlighter/dist/cjs/styles/hljs/a11y-dark";
import…
stellenberger
- 125
- 8
0
votes
0 answers
how do I add code to react-syntax-highlighter tag from a different component
I have a React component called "UploadButton" that allows a user to select and upload a ZIP file. When the file is uploaded, the component extracts a specific JSON file from the ZIP and converts it into a string. I need to find a way to display…
adam Wadsworth
- 774
- 1
- 8
- 26
0
votes
0 answers
Next.JS use fs module in a component that is not directly rendered
My goal is to display code beautifully using prismjs on a next.js application.
My code is stored in a data folder locally.
I use react-syntax-highlighter and fs-extra npm packages.
fs cannot be used directly because it doesn't work in the browser…
ainsley777a
- 1
- 1
0
votes
1 answer
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".
Bikrant
- 23
- 5