XML/XSL Language and Line Highlighting

Here is a workaround I discovered as line highlighting didn’t seem to be seamlessly built in to the plugin at this stage.

For line highlighting, at least with Prism, make sure to turn it on in settings. You can edit the Block as HTML and add a data-line property to the pre element. So if you wanted to highlight line 2 you would add data-line=”2″ to the pre element surrounding your code. For multiple lines you can do 6-10 to highlight lines 2 through 10. To link multiple line highlights together separate with a comma so data-line=”2,6-10″.

On my local machine, when I try to save this, I am forced to convert the Prismatic Block into a Custom HTML block. This is fine, although it seems to be an issue with the plugin interfacing with Gutenberg. I end up with something like this. Note the plugin is still working through the classes, and the fact that it enqueues all the Prism js.

<pre data-line="2,6-8" class="wp-block-prismatic-blocks line-numbers"><code class="language-javascript">function testCode() {
  return 'string'
}
const THING = 234

var array = ['string', 234, true]

let object = { key: array, another: THING, three: 'three' }</code></pre>

• This reply was modified 4 years, 1 month ago by bvgsoftware.