3

I'm using docpad + markdown for my blog. I use highlight.js plugin to format code examples. Formatting works fine and keywords are highlighted. Now, I want to emphasize some pieces of the code block with additional formatting, e.g. to show the changes that I made comparing to the previous block.

Is it possible to highlight some parts of the code block, e.g.

  • make a function call bold
  • strike through some text
  • make some text red

Here is how it looks at Martin Fowler's blog:

Martin Fowler's refactoring example

The only difference is that I would like to keep the keywords highlighting too.

Mikhail Shilkov
  • 34,128
  • 3
  • 68
  • 107

1 Answers1

0

According to Docpad's list of Plugins you have a few options. I noticed the two listed below with a quick skim. There may be others I missed.

  1. Highlight.js Plugin
  2. Pygments Plugin

If you want to customize the way the output looks, I suspect you will need to edit the CSS which either Plugin uses. See the documentation for the specific plugin you choose.

For example, the Highligh.js Plugin docs state that you need to download the stylesheet separately (which would explain why the OP is not getting any styling using that Plugin). Review the provided list and demos and select the style that best fits your desired look.

Download the CSS file and save to the appropriate directory. As the Docpad's docs indicate, that would be at src/render/styles/filename.css being sure to replace "filename.css" with the name of the file. As the docs state:

Then, to include it in our pages, we'll update the styles Block in our default.html.eco layout to:

<%- @getBlock("styles").add(["/styles/style.css"]).toHTML() %>

Again, be sure to use the actual name of your file.

To make any adjustments to the colors/styling used, you will then need to edit that CSS file. Note that Highlight.js provides a list of class names that you can use for styling hooks. Find the specific class names which match up with the items your want to adjust and find where that class is styled in the CSS file and edit until you are satisfied.

Note that the above assumes you are using the default setup and plugins as explained in the "Getting Started" page of the DocPad docs. YMMV.

If you want to highlight changes, then you will need to create a diff of your changes and then define "diff" as the language. Highlight.js will then use the diff highlighter to highlight the changes. Unfortunately, there is no way to get both the language highlighted and the diff highlighted at the same time. In other words, you can either have the keywords highlighted or you can have the changes highlighted, not both.

Of course, you could always define your own "language" and register it with Highlight.js. But that is beyond the scope of this forum.

Community
  • 1
  • 1
Waylan
  • 37,164
  • 12
  • 83
  • 109
  • Yeh, I'm already using Highlight.js, but I could not figure out how to do custom formatting inside the code block. – Mikhail Shilkov Jul 20 '15 at 11:43
  • @Mikhail, that info should be added to your question as it is vital to providing a useful (to you) answer. I've updated my answer to include some more specific information. Note that I have no experience with Docpad, so any statements I make regarding it are directly from their documentation. Their documentation seems to be very clear, I would suggestion you review it carefully. I expect that most of your questions will be answered there. I suspect the only thing you were missing was that the stylesheet needed to be downloaded separately. I missed that too the first time. Hope this helps. – Waylan Jul 20 '15 at 23:40
  • Extended my question as suggested. Highlighting the syntax works fine, but what I want is to extend default language formatting with my custom formatting for specific parts of code block. E.g. cross out a variable name and put new name next to it. – Mikhail Shilkov Jul 21 '15 at 12:22
  • Added some more info to my answer about highlighting changes. – Waylan Jul 21 '15 at 14:32