Front End Development Libraries Projects - Build a Markdown Previewer

Problem:

default styling for HTML code block, HTML table & Back-quote are not rendering properly for both my development env. & CodePen portal.

*this is what I’ve done so far: https://codepen.io/m-lakshan/pen/xxewjZr

My browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0

Challenge Information:

Front End Development Libraries Projects - Build a Markdown Previewer

You have to add plugins. Look at the react-markdown docs

2 Likes

Tnx for ur response @lasjorg . I’ve added it into my Codepen prj as u suggested but didn’t change anything. any particular reason why this is happening? (changes were made in the JS segmant : top lines & line 41 in the middle)

1 Like

You have to add the detect: true option so it adds the classes to the elements.

rehype-highlight
You can specify the code language (such as Python) with a language-* or lang-* class, where the * can be for example js (so language-js ), md , css , etc. By default, code without such a language class is not highlighted. Pass detect: true to detect their programming language and highlight the code anyway.

The syntax is a little weird (double array and an object)

rehypePlugins={[[rehypeHighlight, { detect: true }]]}

It also doesn’t come with CSS, so you have to add the styles. You can look at the highlight.js CSS files. Filter the Asset Type for styling

https://cdnjs.com/libraries/highlight.js


You still need the remarkGfm and remarkBreaks plugins.

1 Like

within the freeCodeCamp demo <code></code> tags they are structured as

<code>
   <span class="token comment">// this is multi-line code:</span>
   <span class="token keyword">function</span> 
   <span class="token function">anotherExample</span>
   <span class="token punctuation">(</span>
   <span class="token parameter">firstLine
       <span class="token punctuation">,</span> 
   lastLine</span>
   <span class="token punctuation">)</span> 
   <span class="token punctuation">{</span> ........... so on.
</code>`

but my markdown code does not render like this... maybe this is the problem for both HTML code & table?

You will see the syntax highlighting if you add the CSS.

Example

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css

The table should be rendered using the remark-gfm plugin. But you may still have to add some styles manually depending on how you want it to look (e.g. borders)

1 Like

Thanks @lasjorg, this help me to structure my <code> tag. I will figure out the rest. :saluting_face:

Mr. @lasjorg , I’ve restructured my JS ‘Prevew’ component part & every thing is now working fine except for the #pass-criteria-4. I tried but couldn’t figure out why my code doesn’t passing that criteria. :roll_eyes:

The preview id needs to be on the element with dangerouslySetInnerHTML

1 Like

tnx Mr @lasjorg for ur support. Now my project working as expected.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.