CODEWITHSUNDEEP
javascriptreactjssyntaxdom-eventspretty-print
0xAnon
0xAnon

Reputation: 897

react-syntax-highlighter not beautifying code?

I am using the package "react-syntax-highlighter" to beautify code in react project, but somehow it still doesn't work as expected. I tried to search similar issues, but couldn't found any solution. Below {codeString} is generated by using blockly (by google).

<SyntaxHighlighter language="javascript" style={docco} showLineNumbers>
      {codeString}
</SyntaxHighlighter>

enter image description here

Upvotes: 3

Views: 3694

Answers (3)

SUMIT KUMAR SINGH
SUMIT KUMAR SINGH

Reputation: 45

For beautify code in react-syntax-highlighter you can use prettier

Example:

enter image description here

Output :

enter image description here

Upvotes: -3

FrameMuse
FrameMuse

Reputation: 373

It doesn't beautify code.

As I investigated, react-syntax-highlighter works as intented, it never says about formatting at all, it's only a highlighter or colorizer.

You have to use a separate library, i.e. prettier. They will not conflict since prettier is just putting tabs, spaces and breaks right into the string.

Upvotes: 1

Yilmaz
Yilmaz

Reputation: 49182

a few things to consider:

enter image description here

Make sure backticks are gonna be on the left edge. do not tab it. and use the language shorthand right after the first ```js as above.

Upvotes: 1

Related Questions