Highlight, or Change Text Color, Inside Code Block?

Is it possible to highlight (like "==something highlighted=="; not syntax highlighting) within a "fenced in" code block?

I find myself needing to include multiple types of code (html, python, even plaintext), but I need to draw the eye to particular lines.

Or can I somehow change the text color?

This is both for my own note consumption, as well as turning in a PDF for credit in course completion. I'm sure I could print from Joplin to PDF and then highlight in my PDF editor, but I'd rather keep it simple and not multiply the effort.

3 Likes

Would something like this be possible with CSS? I've never tinkered with that, especially when it comes to Joplin, so I'm just shooting in the dark here...

1 Like

Just experimenting. So I can get red text with <span style="color:red">some *red* text</span> outside the code block, but it doesn't work inside.

1 Like

I can see why it doesn't. The act of creating a fenced code block effecively says "What follows is code. Nothing after this point should be treated as markdown or html code that should be rendered". That is what the block is for; to be able to display code without it rendering.

The fenced code block has it's own code highlighter (highlight.js?) but that just colours specific key words within the text itself to make code clearer to read and does not apparently accept any form of additional formatting codes.

As I understand it everything within the fenced code block is being managed by the highlighter package and not Joplin's CSS.

1 Like

That makes sense.

Is there any way to accomplish what I'm looking for? I was just trying different things because I wasn't sure how to proceed.

1 Like

As a workaround, is there a way to have fenced-in code blocks print line numbers, so I could at least refer to line numbers, rather than highlighting or changing text color?

1 Like

I am not a programmer but I cannot see how that is currently possible using Joplin as everything that is enclosed in the fenced code block is apparently not controlled by Joplin, but by the highlighter package Joplin uses.

The only workaround I can think of is to not use fenced code, manually add the line numbers and tab indent each line.

Of course you lose code highlighting using this method and for lengthy code listings it could be quite time-consuming.

1 Like

There are other ways that can be used to highlight the code block like on the web https://squidfunk.github.io/mkdocs-material/reference/code-blocks/, but maybe Joplin can develop such a feature too, considering that the highlight feature in the code block is very meaningful to us

3 Likes

There is a way to automatically number items inside a pre tag (or other), but AFAIK, each line must be wrapped in an HTML tag, like a span, and that's not the case in the generated HTML, alas.

1 Like

Yes, this would be perfect!! @laurent, is there any chance something like this can be done?
Line numbers would still be an awesome addition too.

EDIT: I just saw Option to show line numbers in editor for the first time. Hopefully the line numbers can be realized through a plugin soon. Thank you for all that you do!!

1 Like