Stack Overflow
Stack Overflow

Questions tagged [prismjs]

PrismJS is a JavaScript based syntax highlighter. Please also include the tag for the JavaScript technology you are using, for example: [javascript], [reactjs], [node.js], etc. Please do NOT include the tag of the language you are trying to highlight.

PrismJS is an extensible JavaScript-based syntax highlighter.

The Documentation:

124 questions
3
votes
2 answers

Prism code block breaks responsive design (using flexbox)

I designed a page layout that is responsive and adjusts fine to smaller screens, but when I added in a code block (and used prism.js to format it), the responsiveness breaks. The code box and text content both spill over the width of the device and…
grahamjpark
  • 66
  • 6
3
votes
1 answer

Syntax highlighting for build.gradle with Prism

For displaying a build.gradle sample code on my blog, I want to syntax highlighting with Prism. But gradle is not included in the supported languages list. Are there any language-xxxx alternatives to highlighting gradle? Using language-nginx is a…
hata
  • 11,633
  • 6
  • 46
  • 69
3
votes
1 answer

Prismjs not highlighting for React component

I am trying to highlight some javascript code using PrismJS but the text i entered does not change color at all. I have tried using the CDN for prismjs and also npm but i don't see any change when i use Prism.highlightAll(). Here is the editor…
vishnkr
  • 67
  • 1
  • 9
3
votes
1 answer

Add PrismJs to a rails 6 webpacker site

I'd like to add PrismJS. https://prismjs.com/index.html So I have run yarn add prismjs Then updated application.js with: import Prism from 'prismjs'; and application.scss: @import '~prismjs/themes/prism'; And now it highlights JS and CSS…
Will
  • 4,498
  • 2
  • 38
  • 65
3
votes
1 answer

How to load custom prismjs syntax file in react?

Question Desp: How could I highlight a custom syntax with prismjs in a react project? I've created an extending syntax file (let's call it newlang) by following the guide. And I know in prismjs there are three ways to highlight code:…
Gasin
  • 51
  • 2
  • 7
3
votes
1 answer

PrismJs not overflowing with CSS Grid

I have a page layout with a elastic content div and a fixed width column on the right. For that, I have the following basic structure:
Content here
Fixed right…
João Menighin
  • 3,083
  • 6
  • 38
  • 80
3
votes
1 answer

How to transform HTML code block in Gatsby with syntax highlighting using Prism.js?

I want to apply syntax highlighting to HTML content that has tag; e.g. 
  
    function hello () {
      console.log("Hello!");
    }
Gatsby plugins such as gatsby-remark-prismjs, only work on Markdown…
tsega
  • 856
  • 2
  • 15
  • 31
2
votes
0 answers

How to switch ngx-markdown theme dynamically?

I have an Angular app that can switch between light and dark theme. I use ngx-markdown and display code blocks with prism.js for language highlighting. I imported 2 themes in package.json "styles": [ [...], …
Pazu
  • 171
  • 3
  • 8
2
votes
0 answers

How do I do the prismjs diff highlight with language in my markdown file

This (```js) for JavaScript language This (```diff) works for diff. But I don't know I to use both in my markdown file. I'm trying to achieve this in the docs https://prismjs.com/plugins/diff-highlight/
BrunoElo
  • 360
  • 6
  • 11
2
votes
1 answer

prism js copy to clipboard not working in my NextJs app

I am trying to add copy to clipboard plugin from prismjs to my next app. but I don't found any documentation regarding this. I've gone through many websites and implemented this code. All done but copy-to-clipboard plugin doesn't work. Here is my…
Sandip Low
  • 25
  • 6
2
votes
0 answers

How to use Vuepress' custom prismjs syntax highlight theme within a VuePress project

I am currently writing documentation for a Vue Component library, utilizing VuePress. Using VuePress' markdown I am able to display code with <<< ./path/to/file.vue for example. This is nice because VuePress uses prism.js for displaying code and has…
Flowmotion
  • 143
  • 1
  • 1
  • 6
2
votes
0 answers

Syntax highlighting in Django using PrismJS

I'm working on a project using Django(3) in which I have blog posts and in these blog posts, I need to highlight code chunks in case we are writing a programming article. So, I decided to use PrismJS library. I have added the required CSS and JS…
Abdul Rehman
  • 5,326
  • 9
  • 77
  • 150
2
votes
0 answers

Prism.js not working properly in some cases React

I have a react & typescript application. It's a blog post and I'm fetching markdown from an API. I'm parsing it using showdown. The problem is that the syntax highlighting is not working on the fetched code but some of my own code is working…
Akash
  • 762
  • 7
  • 25
2
votes
2 answers

Using Prismjs for syntax highlighted code blocks is breaking layout on mobile - 
 element wont take dynamic width

I'm using Prismjs alongside Mdx for a code-related blog. I'm using it to show code blocks in a manner consistent with other blogs. I'm running into an issue where the rendered code blocks (inside a 
 element are too wide on my mobile layout. For…
Anthony
  • 330
  • 3
  • 13
2
votes
1 answer

Nextjs: server rendered code blocks highlighted by Prismjs mismatches and causes re-render due to leading whitespace on class attribute

I am trying to implement server-side rendering of syntax highlighted (tokenized) code blocks using Prismjs (note: I know how to do this using client-side rendering via useEffect and refs, and I got this working using prism-react-renderer. I am…
HynekS
  • 2,738
  • 1
  • 19
  • 34
1
2
3
…
8 9