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
1
vote
1 answer

prismjs not working between different routes using vuerouter in vuejs

I've imported prism.js globally in main.js file. Code block syntax highlighting working fine in Home components, but after routing to another page using vue-router, there is no effect. in main.js // Global Import import 'prismjs/prism.js' import…
Kiran Jasvanee
  • 6,362
  • 1
  • 36
  • 52
1
vote
0 answers

Unable to get PrismJS to work on my code with GatsbyJS

I am trying to transform the output of my GraphQL/GraphCMS query (the elements wrapped in blocks) into highlighted code blocks with PrismJS. I followed this tutorial in order to get my current setup, and am trying to do this with a html…
Tapha
  • 1,491
  • 3
  • 17
  • 32
1
vote
1 answer

How to use PrismJS in Gatsby when the html and block is contained within dangerouslySetInnerHTML?

So I am trying to use PrismJS within Gatbsy in order to display my code blocks. I followed this tutorial in order to get setup and running, and the following is the implementation within my code: import React from "react"; import { useEffect } from…
Tapha
  • 1,491
  • 3
  • 17
  • 32
1
vote
1 answer

What is the right way to add class in markdown on code fences

My use case is specifically for PrismJS where it needs certain classes in code tag for some additional code highlighting features like line-numbers to show line number, match-braces to highlight matching braces and so on. I am using HUGO for my blog…
Encrypter
  • 234
  • 2
  • 14
1
vote
2 answers

How to use Prism plugins with Docusaurus v2?

I would like to use diff-highlighting on my documentation – which requires installing a plugin It is apparently not installed by default, but there is no documentation on how to add plugins (only languages, which doesn't work for plugins) How can I…
Rémi Rousselet
  • 256,336
  • 79
  • 519
  • 432
1
vote
1 answer

Equals sign is always highlighted white in PrismJS

I am setting up Prism Codeblocks in my Nuxt Content Project and everything seems to be going well except that my "=" symbols have a semi-transparent white background and I cannot figure out why. I have tried different themes thinking it was an issue…
av0000
  • 1,917
  • 6
  • 31
  • 51
1
vote
1 answer

Jest - import a node module

I have an Angular component that imports a node module (in this case it's prismjs). import Prism from 'prismjs'; import 'prismjs/components/prism-markup'; ... I have a piece of code that references Prism.highlightElement() However, when I run my…
Ewan
  • 378
  • 3
  • 14
1
vote
0 answers

Reacht JS: CSS not applied correctly when rendering asynchronously created array

I am trying to display code snippets on a React JS app. For this I have an array of snippets that are obtained using the fetch API. To achieve this I store the necessary information in an array, and then create the Snippet objects using the…
David Wright
  • 464
  • 6
  • 18
1
vote
1 answer

How to proper integrate PrismJS into a Eleventy project?

I'm building a site using eleventy and want to include code examples with code-highlighting. Prism looks like a great choice for this. How would I add it proper to the build process (not as CDN)?
spekulatius
  • 1,434
  • 14
  • 24
1
vote
1 answer

Database of file extensions to file type/language mappings

vscode uses a nice schema for file extension to language mapping: https://code.visualstudio.com/docs/languages/identifiers "files.associations": { "*.myphp": "php" } "languages": [{ "id": "java", "extensions": […
tig
  • 3,424
  • 3
  • 32
  • 65
1
vote
1 answer

How do I run Prismjs in a Svelte component?

I'm simply trying to implement Prismjs into my Svelte project. I'm loading the CSS in my and I'm importing the JS in my Svelte component. I'm running into a similar issue described here:…
Esten
  • 1,385
  • 2
  • 12
  • 21
1
vote
1 answer

Highlighting JS syntax with ngx-prism

I want to display some code at my site and highlight syntax so it's more readable. I basically wanted to use some library for that so I found this ngx-prism. I followed every step from its docs which is: I run both commands: npm i --save…
BT101
  • 3,666
  • 10
  • 41
  • 90
1
vote
1 answer

How to add copy to clipboard functionality in vuejs with prismjs?

I am displaying Html syntax using vue-prism-component (https://www.npmjs.com/package/vue-prism-component). Now I want to add a button that should copy the code. So far, I have found a library vue-clipboard2…
shashi verma
  • 873
  • 2
  • 15
  • 25
1
vote
1 answer

Syntax Highlighting not working with Prismjs

I am running ghost as a blog software and I have a blog post that has markdown code snippets that I would like to have syntax highlighted. I have followed the instructions to include the necessary header and footer tags and the specific tag for the…
Nicko
  • 35
  • 2
1
vote
1 answer

Import html string on a different file on react. Using prismjs to display code highlighting

Using Prismjs to display code snippets in a design system. I want to separate the html code sample in a standalone file and import it into my component. Code sample Component: CodeSampleContainer.jsx import React, { Component } from 'react'; import…
Richard Bustos
  • 2,870
  • 5
  • 24
  • 31
1 2 3
…
8 9