Stack Overflow
Stack Overflow

Questions tagged [highlight.js]

Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages.

Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It's very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.

https://highlightjs.org/

Stack Snippet Starter Pack

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

<pre><code class="js">
var msg = "Hello!";
</code></pre>

JavaScript

hljs.highlightAll();
159 questions
21
votes
4 answers

Highlight.js in textarea

So i have been struggeling to use highlight.js in a text area since obviously this doesn't work: Hello World
Kivi Freak
  • 211
  • 1
  • 2
  • 4
20
votes
3 answers

TiddlyWiki5 and highlight.js - How to change style / theme of syntax highlighting?

I am using TiddlyWiki version 5.1.13. I have added the highlight plugin (version 5.1.13) which uses highlight.js (version 8.8.0). In a tiddler I successfully highlight XML like this: ```xml ``` How can I…
Dennis
  • 646
  • 2
  • 6
  • 19
14
votes
5 answers

How to do syntax highlighting on Next.js markdown blog

I'm using Next.js for my blog and I'm storing my blogs in markdown files and converting those files to string and then into HTML using Greymatter. My code blocks break down into 
 and no matter what I do, I can't…
Jimmy McBride
  • 385
  • 3
  • 11
14
votes
4 answers

Highlight.js with Blogger: can't disable auto line wrap

I'm trying to integrate Highlight.js with Blogger. So far, the syntax highlighting works great, but I can't seem to find a way of preventing the code lines inside the 
 elements to wrap automatically. What I need instead is for the browser…
glampert
  • 4,371
  • 2
  • 23
  • 49
13
votes
3 answers

Reveal.js: Add fragments inside code

I've got a presentation running with reveal.js and everything is working. I am writing some sample code and highlight.js is working well within my presentation. But, I want to incrementally display code. E.g., imagine that I'm explaining a function…
baylee
  • 649
  • 9
  • 15
12
votes
5 answers

highlight.js does not work with Angular 2

I am trying to add syntax highlighting to my application using highlight.js but it doesn't seem to work with Angular 2. Could you please let me know what I might be doing incorrectly? Here is the Plnkr:…
takeradi
  • 3,661
  • 7
  • 29
  • 53
12
votes
2 answers

Emphasizing lines with highlight.js

Is there a way to emphasize lines with highlight.js? For instance by coloring them differently, changing the background color, or other means.
user3761898
  • 1,143
  • 1
  • 8
  • 7
8
votes
2 answers

How can I correctly highlight a line by line code, using highlight.js (React)?

I need to highlight a block of code but at the same time, I need the code to be placed on separate and numbered lines, to leave comments for each line of code, just as can be done on Github. I managed to do this but because I highlight the code for…
Alex Popa
  • 131
  • 5
8
votes
1 answer

How to specify language when using highlight.js?

I'm using highlight.js to highlight code blocks in HTML. highlight.js can find all code blocks and determine the language automatically but I would like to specify both element(s) and language(s) manually. By specifying the language I would like to…
wenzeslaus
  • 667
  • 6
  • 13
7
votes
2 answers

Load only highlight.js library using TypeScript, not default with all languages loaded

As the official highlight.js usage document suggests: The default import imports all languages! Therefore it is likely to be more efficient to import only the library and the languages you need: import hljs from…
austinbruch
  • 323
  • 2
  • 14
7
votes
1 answer

How to highlight all R function names with highlight.js?

I want to extend highlight.js capabilities for R language so that (1) all function names that are followed by opening parenthesis ( and (2) all package names that are followed by :: and ::: operators would be highlighted (as it is in RStudio, see…
GegznaV
  • 4,938
  • 4
  • 23
  • 43
7
votes
1 answer

How to use specific font with highlight.js

Updated with the proper link to the example I am using a Hugo theme that comes with bundled with CSS and uses Highlight.JS for syntax highlighting. The web pages I have created show a plain "courier" based fixed width font in the code blocks see…
Zee Kay
  • 73
  • 1
  • 5
7
votes
1 answer

Highlight.js custom language definition

I'm trying to create language definition for highlight.js. But it doesn't work. I've got an example. In this example i'm trying to create custom "aaa" language, which is the same as JSON. registerLanguage function receives same function as a default…
Mark Birger
  • 174
  • 1
  • 2
  • 12
6
votes
0 answers

Highlight.js "Could not find the language 'undefined', did you forget to load/include a language module?"

I am using highlight.js for Froala editor code blocks at React. But I'm getting en error. I used registerLanguage function but it didn't work. Error in browser: Here is my code : import FroalaEditor from 'react-froala-wysiwyg'; import hljs from…
user15721538
6
votes
0 answers

Java syntax highlighting with Highlight.js

I'm using highlight.js to style Java and it's generating markup for strings, keywords and numbers but not for types and literals. I'm using highlight.js/9.11.0. Suggestions? See example: https://codepen.io/amandaw/pen/bWMraO CSS .hljs-variable { …
Amanda Willoughby
  • 73
  • 5
1
2 3
…
10 11