Codemirror syntax for new languages and creating a new Content Types

[N P]

Hello,

One of my many use cases for TiddlyWiki is to store complex code and snippets that I regularly use in languages such as SQL, Powershell, XML etc.  I'd like to be able to add new Content Types for tiddlers (i.e. application/sql, application/xml, application/ps1 etc) and add these languages to Codemirror.  This way Codemirror could "highlight" and color code the necessary code that matches the select language. 

I've tried this a while back and failed but today I downloaded the plugin CodeMirror Mode: XML Highlighting (5.1.17) which says it adds highlighting for XML tiddlers (application/xml).  I'd thought I could use this as a reference for making other highlight plugins.  The problem was TW5 did not have a Content Type available called (application/xml) and the plugin did not add it.  So the plugin did nothing.

I went ahead and created the below Tiddlers to see if I could create a new Content Type:

$:/config/EditorTypeMappings/application/xml
$:/language/Docs/Types/application/xml

Adding the above worked and added a Content Type called "Xml data (application/xml)".  It also looked like Codemirror colored my sample XMl tiddler.  The problem is, when I confirm the changes, the XML is rendered as text.  I'd like it to show as a Code box like the other developer Content Types would.

[BurningTreeC]

Hi @N P

take a look at https://tiddlywiki.com/plugins/tiddlywiki/highlight/

it describes how to make codeblocks with the correct highlighting for the different languages

[BurningTreeC]

If you want to, you can modify $:/core/ui/ViewTemplate/body to this:

\define render-snippet()
```$(language)$
$(codeSnippet)$

```
\end

<$reveal tag="div" class="tc-tiddler-body" type="nomatch" state=<<folded-state>> text="hide" retain="yes" animate="yes">

<$list filter="[all[current]!has[plugin-type]!field:hide-body[yes]]">

<$list filter="[all[current]tags[]regexp[^\$:\/tags\/highlight\/]limit[1]]" variable="highlightTag" emptyMessage="""

<$transclude>

<$transclude tiddler="$:/language/MissingTiddler/Hint"/>

</$transclude>

""">

<$list filter="[<highlightTag>removeprefix[$:/tags/highlight/]]" variable="language">

<$wikify name="codeSnippet" text="""<$text text={{{ [<currentTiddler>get[text]] }}}/>""">

<<render-snippet>>

</$wikify>

</$list>

</$list>

</$list>

</$reveal>

this renders tiddlers tagged with $:/tags/highlight/xml in xml, $:/tags/highlight/javascript in javascript and so on.

If you transclude such a tiddler with {{my-snippet-tiddler}} the highlighting will not be rendered...

therefor, you could use a macro that transcludes such a tiddler with the highlighting applied. put this in a tiddler tagged with $:/tags/Macro :

\define render-code-snippet()
```$(snippetLanguage)$
$(snippetCode)$
```
\end

\define snip(tiddler)
<$list filter="[<__tiddler__>tags[]removeprefix[$:/tags/highlight/]limit[1]]" variable="snippetLanguage">
<$wikify name="snippetCode" text="""<$text text={{{ [<__tiddler__>get[text]] }}}>""">

<<render-code-snippet>>

</$wikify>
</$list>
\end

With this in a macro tiddler, you can include your code snippets in other tiddlers with:

<<snip "snippet tiddler title">>

[N P]

Thank you.  I didnt realize the highlight plugin accomplished this.  

The only issue is the highlight plugin when incorporated into TiddlyWiki only supports a select number of languages.  Powershell is not on the list.  Any idea how to add additional languages?

[N P]

Thank you very much @BurningTreeC

I found it my questions were all answered here:

thread https://groups.google.com/forum/#!topic/tiddlywiki/aOxmaJL_qbc

instructions https://hoelz.ro/files/highlighter-example.html