Menu
This code works fine:
<head>
<script src='.../prism/prism.js'></script>
<link href='../prism/prism.css' rel='stylesheet' type='text/css'>
</head>
<pre>
<cоde class="language-html">
<span>one</span>
</cоde>
</pre>
But if you connect to the textarea, then nothing works.
<textarea name="text" class="language-html">
<span>one</span>
</textarea>
Why? And what should be corrected that would work?
886
PrismJs specifies that it uses the <pre> and <code> tags only, so a <textarea> won't work.
Therefore, it only works with
<code>elements, since marking up code without a<code>element is semantically invalid. https://prismjs.com/index.html
However, there is a side project called PrismJs live which you can attach to textareas https://live.prismjs.com/ - It is made by Lea Verou, and currently a work in progress.
The full and up to date instructions are on the website, however basically you need to include prismjs-live.js after prism.js, and prism-live.css after your standard, prism.css`.
With the Javascript library call, you also need to include the langauges you want to load too, e.g., prismjs-live.js?load=php,javascript
<head>
<meta charset="UTF-8">
<title>Prism Live: Lightweight, extensible, powerful web-based code editor</title>
<link rel="stylesheet" href="./prism.css">
<link rel="stylesheet" href="./prism-live.css">
<textarea aria-label="Enter your response here" rows="5" class="prism-live"></textarea>
<script src="./prism.js" charset="utf-8"></script>
<script src="./prism-live.js?load=python,javascript" charset="utf-8"></script>
</head>
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
