{-...">
Geek Answers Handbook

Is it possible to use the highlight.js built-in mode?

I managed to create the code with highlight.js as follows:

 <pre> <code class="haskell"> {-# OPTIONS_GHC -Wall #-} euclid :: Int -> Int -> Int euclid ab | a == 0 = b | b == 0 = a | a > b = euclid (ab) b | otherwise = euclid a (ba) </code> </pre>

Works great! But now I also want to have some lines of code in my text, inline. Like this:

 <p> Info text inline code testing <code class="haskell">{-# OPTIONS_GHC -Wall #-}</code> maybe it works</p>

Doesn't work ... You can check them out on my website.

How to make inline code with highlight.js ?

+6
source share
3 answers

You just need a little CSS to make it inline. How you do this is up to you, but you can make it inline if it is in the p tag.

 p > code.hljs { display: inline; }

Example: https://jsfiddle.net/ykyLcvnw/1/

+8
source

In the first example, you use the <pre> and <code> tags. This is not so in your second.

On the highlight.js page:

This will find and highlight the code inside the <pre><code> tags;

I also added this example on the use page:

  $('pre code').each(function(i, block) { hljs.highlightBlock(block); });

Since your inline markup is in the <span> , i.e. the span code hierarchy, you can achieve inline highlighting with something like:

  $('span code').each(function(i, inline) { hljs.highlightBlock(inline); });

I ran this code in the console on the test page and I see the results. Assuming you are not using jQuery, the pseudo code is just

  • iterate over all the desired elements
  • apply hljs.highlightBlock (element)
+1
source

It will be much easier if you define your own inline class in CSS, like this

 .inline{ display: inline; }

Then set your class tag to haskell inline .
To do this, you can do this the same way for any other language, replacing haskell with your choice of language.

-1
source

More articles:


All Articles