Hello,
This is my Codepen:
https://codepen.io/ALL9000/pen/xxpqaqO
I have three problem with my code: Highlight code, link target blank, FCC logo.
I read the Documentation of Marked for options
https://marked.js.org/using_advanced#options
and I tried to modify my code and I read same solutions write differently in Github
https://github.com/markedjs/marked/issues/655
but nothing work.
I think as there are some general exemple in Documentation that I don’t understand exactly for now, I can’t to adapt them to my code. Also maybe as English is not my native language, it makes things more difficult.
1 - Highlight code
I copy / past this FCC solution, VScode doesn’t reconize “Prisme”:
marked.setOptions({
breaks: true,
highlight: function (code) {
return Prism.highlight(code, Prism.languages.javascript, 'javascript');
}
});
2 - I tried the FCC solution but that change nothing:
const renderer = new marked.Renderer();
renderer.link = function (href, title, text) {
return `<a target="_blank" href="${href}">${text}</a>`;
};
3 - Why the FCC logo at the bottom over the div id='preview" ?
I left the FCC solutions at the top of the code as comment for help you.
First off either bring in resources in the HTML, the JS, or the Codepen setting, don’t mix them using the same resources. I would suggest using the setting and JS imports (again don’t mix JS imports and the settings).
-
Prism is a library, you have to include/install it. You also have to include the CSS that comes with it.
https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js
https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism.min.css
- To use the custom link you have to pass
marked a second options object argument with the render.
From the example project:
<div
dangerouslySetInnerHTML={{
__html: marked(props.markdown, { renderer: renderer })
}}
id="preview"
/>
- Not sure what you mean? It is overflowing its container because you didn’t set any CSS to prevent it.
1 Like
please give the solutions, could you correct my code ? so that I can try to understand the documentation of “market”. Why is “Prism” not used in the documentation? I pasted your code but it still doesn’t work.
someone helped me with the resources. It was difficult because codepen didn’t understand Bootstrap’s “badge” component for React. So I still haven’t figured out how he did it.
I’m lost with all this, we told me to do things but I can’t find any explanation.
Prism.js has nothing to do with Marked.js they are two separate libraries.
-
Remove everything from the HTML except the <div id="root"></div> element.
-
Click the Settings button and under the JS section add the Prism.js script. Click the “+ add another resource” button at the bottom and paste in the script link.
https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js
- Now go to the CSS part of the Settings and add the Prism.js CSS file.
https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism.min.css
-
Close the settings and uncomment the code at the top.
-
Go you where you are using dangerouslySetInnerHTML and add the options object.
marked(this.state.markdown, { renderer: renderer } )
Or just { renderer } as the key and value are the same.
Explain me please why in this githubpage nobody use “Prisme”?
https://github.com/markedjs/marked/issues/655
I say myself there must be a simpler solution.
I m so confuse because there are so many manners to do things
Again that has nothing to do with Prism. Prism is used for code highlighting.
Ooo! yes sorry
I have succeeded to display link in another tab. you can chek.
What is renderer used for?
This page describe the Hightligth option and nowhere it talk about ‘Prisme’. Is there a simpler solution ?
https://marked.js.org/using_advanced#highlight
Not really, but I don’t think using Prism is difficult. There are other code highlighting libraries but they are used the same way.
You already have the code, you just need to use it and add the Prism JS/CSS.
before to use the solution with prisme I would like to adapt the solution of this page in order to well unsersatnd how to read the documentation. Of course I can use prisme but I have to pass with documentation only for my training .
could you help me ?
If I do that the layout is destroied. It’s like Bootstrap doesn’t work anymore. So… 
I don’t know what you are asking me?
If you do not want to use a code highlighter just don’t use it. If you do, well that requires research and time spent learning how to use it. There are no shortcuts.
That is because you didn’t add the Bootstrap CSS. I know I didn’t mention it but it should be fairly obvious that Bootstrap won’t work without the CSS.
Add it to the settings under the CSS section.
https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css
Awsome for react-Bootstarp cdn link. I have
had so many problems with “badge” few days ago. I don’t understand why because I had tested this solution. 
Thanks.
I did points 1 to 5 but doens’t work. you can check.
Aren’t there too many things in my setting JS ?
You added the Prism CSS file in the wrong place. It should go under the CSS settings (same place as the Bootstrap CSS).
OK now you move the Prism JS to the CSS section.
The JS section is for .js files
The CSS section is for .css files
Look at the end of the file names
https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js
https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism.min.css
Already done and well save
I think you might need a break. Take 5 minutes, do something else and come back.
5 minutes later…Now look at the file name and the file extension and tell me if you have files in the wrong place?
Sorry,
It’s better but still no perfect:
only for symbols == &&
Maye yes, because when I reduce the window width the horizontal scrollbar appear.
but the background still grey not white as in FCC solution.
No it is working (although you still have a js file under the CSS section).
If you want it to look like the example project you have to add the same CSS.
code {
background: white;
font-size: 0.875rem;
font-weight: bold;
}
pre {
display: block;
overflow: auto;
background: white;
padding: 5px;
line-height: 1.2;
}
Also, remember that you are using Bootstrap and it has its own styles for all elements (including code and pre)
