Menu
I'm using Prism and its working well for CSS:
<pre><code class="language-css">p { color: red }</code></pre> but i can't get it working for html:
<pre><code class="language-html"><p class="red">red text</p></code></pre> I have 2 problems:
< and > are represented as tags, not as text, but i could replace it by < and >
More important, even replaced as shown in problem 1, the highliter will not highlight any code and everything is just black. Despite that it is working for CSS, whole code looks like this:
<!DOCTYPE html> <html> <head> <link href="prism.css" rel="stylesheet" /> </head> <body> <script src="prism.js"></script> <pre><code class="language-css">p { color: red }</code></pre> </body> </html>
Thanks for any help.
327
Go to the Prism project homepage (https://prismjs.com/), then to the download page as before, and generate a script file selecting only the coding languages you are interested in; don't reselect any plugins. Then download the JavaScript file. Remember: do not download the CSS file, only the prism. js file.
Syntax Highlighting with PrismJS Prism is a lightweight, extensible syntax highlighter that can be used when working with code blocks in markdown files in blog posts.
pdf [411KB], which is a compilation of past slides.) PRISM is a general programming language intended for symbolic-statistical modeling. It is a new and unprecedented programming language with learning ability for statistical parameters embedded in programs.
babelrc file, create one in the root folder of your source code and add the following JSON to the . babelrc file. Step 3: Create a simple react component code. js and import PrismJS into your react component and configure the component to read the language props from App.
Use <code class="language-markup"> to style html code.
Also, you only need to escape the beginning of the tags with <, don't worry about the > characters. The easiest way is to paste your html code into the pre tag, then perform a find and replace for all < characters.
This should work:
<!DOCTYPE html> <html> <head> <link href="prism.css" rel="stylesheet" /> </head> <body> <script src="prism.js"></script> <pre><code class="language-markup"> <p class="red">red text </p> </code></pre> </body> </html> To solve issue 1):
You can use the unexcaped-markup plugin
This is how it works:
<script type="text/plain" class="language-markup"> <p>Example</p> </script> To ignore first and last returns I would recommend using the normalize whitespace plugin.
To solve issue 2):
There exists no languages-html see http://prismjs.com/index.html#languages-list. HTML is a HyperTextMarkupLanguage so its included in language-markup. Thats what you have to use.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
