I would like to use Prism in my Rails 7 project to highlight code in specific pages.
To make that:
- I downloaded the Development version of Prism for Markup + HTML + …, CSS, C-like, and JavaScript languages, and with all the available plugins.
- I imported the Prism library in Rails 7 by following the Path 2: Download css and js files into your vendor folder blog post.
Now, in my Rails project I’ve these files:
project
> vendor
> javascript
> prism.js
> stylesheet
> prism.css
I also changed relevant files by adding Prism-related references:
# config/importmap.rb
pin 'prism', to: 'prism.js'
# app/javascript/application.js
import 'prism'
# app/assets/stylesheets/application.css.scss
@import 'stylesheet/prism';
To verify code highlighting, in a my test.html.erb template file I added the following:
<pre><code class="language-css line-numbers">
p {
color: red;
text-align: center;
}
</code></pre>
But when I render that page then in the browser console I get the error Uncaught TypeError: Prism.languages.css.selector.inside is undefined.
How to solve the problem?