Code-blocks

[Barbro Faries]

Joplinplugin that enhances code blocks with inline rendering, autocompletion, and more - GitHub - ckant/joplin-plugin-better-code-blocks: Joplin plugin that enhances code blocks with inline render...

I frequently use code fences in my notes to keep track of snippets and documentation when I'm researching. But I find that the enclosing back-ticks kinda get in the way when I'm copying/modifying the code.

I added some other useful features like auto-completion of code blocks, a (hidden) copy button for quickly copying code, and a nifty hook to change "Select All" to select a code block instead if the cursor's currently inside one (you can "Select All" once more to get the normal behavior).

One of my goals with the rendering was to make it look as "native" as possible. So I was careful not to introduce extra vertical space when compared to the normal Joplin / CodeMirror rendering. I replaced the HTML of the fences (should be the same height ), but I didn't mess with the actual code lines.

Personally, I'd rather have the copy button visible. With it hidden you kind of have to fish around for it. I think the copy button is such a standard element of code blocks that it makes sense just to have it visible.

I currently added two "layouts" for this. One hides the fences completely and moves the python part below the code block. The other makes it look like the fences are unchanged, but they've actually been replaced by different HTML elements and have been made unselectable.

That's interesting. The reason I hid it was to make it less intrusive when editing, but that definitely a personal preference. I was also thinking about having an option to remove it altogether.

Would you want it to show up all the time or only when hovering over the code block with the cursor? I've seen both patterns used in the wild. Making it appear only when hovering is tricky I think, since I really only have control over individual lines in the note rather than a "wrapper" for each code block. That's just the way CodeMirror renders documents. Code fences are just normal lines.

It is unfortunately expected. I noticed this happening in other similar plugins that mess with the HTML of the notes (e.g. Enhancement, Rich Markdown ), so I was thinking it was inevitable. But I should definitely take another look at it. No doubt it has something to do with re-rendering before/after the plugin is applied. Might be able to add a delay or something.

Sorry for my, probably quite stupid question. I am new to Joplin and have no idea how to use your plugin. I have installed it successfully.

But I don't see any new icon or anything like that. Typing '...typescript' does nothing.

So what do I have to do to see the desired result?

The guy who does the Rich Markdown plugin once told me it was not possible to have code blocks scroll horizontally via overflow instead of wrapping due to the mechanics of CodeMirror. Not to say I don't believe him, because I've tried all manner of CSS hacks myself to no avail, but I don't suppose you might've come up with something to make that happen, eh?

As far as I can tell, this is true because the CodeMirror line layout is flat (i.e. there is a single codemirror container that holds all of the lines). There is no subcontainer created to hold lines that are part of the same code block. So there is no real way to work on the code block lines as an individual unit.

So I think CSS would only let you scroll all lines in the note or individual lines in the note. Whereas you would want to scroll all lines of the same code block in the note.

The work around I have found is to type three back tics on their own line after the ```typescript line. This then tricks the plugin into thinking that I have an empty fence. it then unlocks it. I can change the text and then delete my extra three ticks.

Of course the best approach for editing the language would be to show a modal/dropdown/etc when you click the language. But I wasn't sure if this was worth the effort since I never really had the usecase to change languages. It does seem like a nice addition though.

3a8082e126