Adding a fenced code block in a template

I’m trying to use a template to wrap the text of certain tiddlers in a

```sql
fenced code
block
```

Eventually I will also add a copy-to-clipboard macro call, but I need this part working first.

I have a $:/tags/ViewTemplateBodyFilter to point to my template when the tiddler is tagged SQL. I can easily use a template like this:

<pre><code class="language-sql">{{!!text}}</code></pre>

But it seems like the Highlight plugin does not cover its underlying library’s usage of <code class="language-xxx"> (please correct me if I’m wrong) so I need to create a fenced code block. And I’m… err… blocked.

I had a number of failed attempts. The latest is the, which it seemed like it should work, but alas:

\define pre() 
```sql

\end
\define post()

```
\end

<$wikify name="content" text={{{ [{!!text}addprefix<pre>addsuffix<post>] }}} ><>

How would you go about it?

This is what I’m working with: FencedCode.json (210.2 KB) (Most of that is the Highlight Plugin.) Download it and drag to any wiki. If that wiki already has the Highlight Plugin, then you can skip that on import. You will need to save and reload for the Highlight Plugin to take effect. The other tiddlers are:

  • SQL Sample with fenced code block, demonstrates what I’m looking for
  • SQL Sample with pre/code, shows why I can’t use a simple <pre><code> wrapper with Highlight
  • SQL Sample is the test case I’m trying to alter with the template
  • $:/_/sql/config/ViewTemplateBodyFilters/sql is a cascade entry to point to the body template in the following
  • $:/_/sql/core/ui/ViewTemplate/body/sql this is the template I’m trying to create. All I really want it to do is to wrap the text between
```sql
and
```
lines.
<$codeblock language="sql" code="""SELECT o.order_id,
       COUNT(*) AS order_items_count
  FROM orders o
  JOIN order_items oi
    ON o.order_id = oi.order_id
 WHERE o.order_id BETWEEN 10200 AND 10300
 GROUP BY o.order_id;"""/>

In the template form you would pass {{!!text}} as the code attribute.

The highlight plugin works by extending the codeblock widget, so you need to use the widget and not the underlying HTML directly. There are a few examples in this forum of overriding the codeblock widget with wikitext to add a copy to clipboard button.

1 Like

Sounds like a job for the $genesis widget. But I don’t know how to apply the sql moniker.

Well, that was easy. I should have asked two hours ago! I should have realized that this was already built-in.

Thank you very much!

1 Like

Some day, I’ll spend some time with that one!