CODEWITHSUNDEEP
javascripthtmlreactjs
HMH
HMH

Reputation: 157

How to show code blocks in html in a certain way using React.js

I want to show code blocks in my react app exactly like how they have it in react routers website page, (same color scheme). How would I go about accomplishing this , I tried prettyfied from google but I kept getting an error since Im using React.js.

Here is the react router website,(how I want my code to be display, same style/color): https://reacttraining.com/react-router/web/guides/quick-start

Upvotes: 1

Views: 8716

Answers (1)

Nate Kimball
Nate Kimball

Reputation: 968

What you're looking for is Syntax Highlighting. In ReactJS, there's a couple ways you can accomplish something like this:

  1. Use a syntax highlighting library from NPM. I haven't really used any of these myself, but seeing as this is a common need in the world of programming, I have no doubt that one of these solutions will work well for what you're trying to do, with a little tweaking.

  2. Use a markdown editor library from NPM. If you need something client-side (i.e. a code editor), there's a lot of user-friendly solutions out there that plug into React quite nicely.

  3. Build it yourself. You might consider taking an approach of creating your markdown editor specific to your needs. It would be a good way for you to learn some fundamentals for manipulating input.

Best of luck!

Upvotes: 2

Related Questions