[TW5] How to enable wikilinks in codeblocks?

[Ruslan Prokopchuk]

Hi!

I think TiddlyWiki fits perfectly for literate programming. The only thing I miss (except tangling sources for passing to the compiler, but it is easy implemented as an external tool) is an ability to support wikilinks in codeblocks. I mean that stuff like that:

```
function parentChunk() {
  console.log("let's include another chunk below");
  // [[Included chunk name]]
}
```

to be rendered as

function parentChunk() {
  console.log("let's include another chunk below");
  // Included chunk name  <---- link to the tiddler! <a> tags are allowed inside <pre> and <code> ones AFAIK
}

Is it possible to shadow codeblock macro to add support for that? How to do that?

[Mat]

I asked for something similar not very long ago. Basically to permit a subset of commands to be active inside code blocks. Unfortunately not possible currently.

Instead I was advised to use the codemirror plugin.

You can also enclose your code in a div to merely styles things but this obviously doesn't do the main thing that a code block does.

I've experimented with using sandboxes based on iframe with the srcdoc attribute - see for example in QuickTid (the "Content" button, sandbox option). I think there is potential in this but the comments from more knowledgeable people has not been very enthusiastic. Hope to do more experimentation eventually.

<:-)

[PMario]

Hi Ruslan,

You'd need a special code block parser and renderer for this usecase.

At the moment I don't know a way to do this out of the box.

-mario

[Ruslan Prokopchuk]

I've come up with a quick and dirty hack by replacing

codeNode.appendChild(this.document.createTextNode(this.getAttribute("code")));

with

        var t = this.getAttribute("code").split(/(\[\[.+?\]\])/);
        for (var i = 0; i < t.length; i++) {
          if (i % 2 === 0) {
            codeNode.appendChild(this.document.createTextNode(t[i]));
          } else {
            var a = this.document.createElement("a");
            var s = t[i].slice(2, -2);
            a.setAttribute("href", "#" + encodeURIComponent(s));
            a.appendChild(this.document.createTextNode(s));
            codeNode.appendChild(a);
          }
        }

in $:/core/modules/widgets/codeblock.js

but I definitely eager to have a chance for a proper, flexible and clean solution!

вторник, 10 мая 2016 г., 19:51:48 UTC+3 пользователь Ruslan Prokopchuk написал:

[Jeremy Ruston]

The simplest way to have active wikitext within a code block is to use the underlying HTML tags instead of the triple backticks:

\rules except italic
<pre><code>

function parentChunk() {
  console.log("let's include another chunk below");
  // [[Included chunk name]]
}

</code></pre>

I’ve included `rules except italic` to suppress the parsing of double slashes as italics.

The approach could be made more convenient by using a template and invoking it with a macro.

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/4b8aaa19-0640-4f46-9101-9a755496bbae%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[PMario]

On Tuesday, May 10, 2016 at 8:00:21 PM UTC+2, Jeremy Ruston wrote:

The approach could be made more convenient by using a template and invoking it with a macro.

IMO not really a solution. The OP stated it is used in a "literate programming" context. So having HTML source code or macro calls imo is not the desired behaviour.

-m

[Ruslan Prokopchuk]

Mario is right, \rules solution doesn't work well in my situation. I've spent entire morning playing with it, but decided to write custom parser: https://gist.github.com/ul/bdd6c6d6715b8ed36348304c973a91af

Custom parser is better than custom widget because you not only get links, but proper reference handling, missing, orphans etc.

вторник, 10 мая 2016 г., 19:51:48 UTC+3 пользователь Ruslan Prokopchuk написал:

Hi!

[PMario]

On Wednesday, May 11, 2016 at 9:30:54 AM UTC+2, Ruslan Prokopchuk wrote:

Mario is right, \rules solution doesn't work well in my situation. I've spent entire morning playing with it, but decided to write custom parser: https://gist.github.com/ul/bdd6c6d6715b8ed36348304c973a91af

Custom parser is better than custom widget because you not only get links, but proper reference handling, missing, orphans etc.

Your literate programming approach is very interesting.

If you use {{Included chunk name}} instead of [[Included chunk name]] it should be possible to create tangled source output out of the box, with some custom rendering templates.

So your code snippet would look like this:


```
function parentChunk() {
  console.log("let's include another chunk below");

  {{Included chunk name}}
}
```

just some thoughts.

-mario

[Ruslan Prokopchuk]

The point of using links is to not transclude referenced chunks on the render, but only during the tangling process. Usually, you want to read literate code folded, but with an ability to jump quickly to included chunks.

среда, 11 мая 2016 г., 10:41:53 UTC+3 пользователь PMario написал:

[Ruslan Prokopchuk]

But yes, if I'm using a custom parser anyway, I can treat transclusion as links on the render, and as transclusion on the export! Thank you for the idea!

среда, 11 мая 2016 г., 11:01:46 UTC+3 пользователь Ruslan Prokopchuk написал:

[PMario]

On Wednesday, May 11, 2016 at 10:01:46 AM UTC+2, Ruslan Prokopchuk wrote:

The point of using links is to not transclude referenced chunks on the render, but only during the tangling process. Usually, you want to read literate code folded, but with an ability to jump quickly to included chunks.

I know. ... But your "hacky" parser doesn't need to create a transclusion for {{xxx}} it just creates a link. So your regexp needs to be changed a little bit.  ... But my code snippet can be tangled with TW and some "to be done" templates out of the box, which imo would be a big win.

-m

[Mat]

@Ruslan

...decided to write custom parser: https://gist.github.com/ul/bdd6c6d6715b8ed36348304c973a91af

This is terrific!!! As someone who is currently taking his first steps in formal coding, being able to link e.g to keywords etc in the middle of code snips is VERY valuable. Thank you so much!!!

...and this should be a useful addition to it: @TobiasBeer's Preview widget! 

<:-)