(tw5) howto display c source code syntax highlighted in a scroll box with line numbers

ch

unread,

Sep 12, 2015, 8:14:53 AM9/12/15

to TiddlyWiki

hi,

i started to use tw5 running on node.js to evaluate it as a wiki containing information about software development, for example:

1. links, like howtos, man pages, etc.

2. documents, like style guides, protocols, etc.

3. c source code examples, for educational purposes

it was pretty easy to manage point 1 and 2 above, but for point 3... i'am clueless.

basically, i want the following:

- create a tiddler which contain the raw c source code as plain text, then utilizing a new tiddler (transclude the source code tiddler...?) which can display the c source code, like this:

https://codemirror.net/demo/marker.html

i don't want to replace the built-in tw editor with codemirror (not yet) - i only want to utilizing the "viewing features" of codemirror.

- how do i accomplish that?

please note that i have no experience about the codemirror plugin, so a detailed step-by-step guide is highly appreciated.

kindly,

christian

ps. clicking the line-number gutter to add or remove 'breakpoints' - is a nice codemirror feature, which i also want...

Mat

unread,

Sep 12, 2015, 9:02:15 AM9/12/15

to TiddlyWiki

Woudl it be enough to merely put the code within triple backticks

```

like this

```

I.e

empty line (!)

triple backticks on its own line

content

triple backticks on its own line

<:-)

ch

unread,

Sep 12, 2015, 9:06:54 AM9/12/15

to TiddlyWiki

no

Jeremy Ruston

unread,

Sep 13, 2015, 5:01:05 AM9/13/15

to TiddlyWiki

Hi ch

Have you tried the highlight plugin? It provides syntax highlighting for code blocks:

http://tiddlywiki.com/plugins/tiddlywiki/highlight/

Best wishes

Jeremy.

no

--
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 http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5b0db155-34d3-4251-a180-c8e0e528e609%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Jeremy Ruston
mailto:jeremy...@gmail.com

ch

unread,

Sep 13, 2015, 6:41:10 AM9/13/15

to TiddlyWiki, jeremy...@gmail.com

hi jeremy,

sadly, the highlight plugin doesn't support line numbers:

http://highlightjs.readthedocs.org/en/latest/line-numbers.html

codemirror seems to support all features i want:

1. syntax highlight

2. line numbers

3. display the c source code in a scroll box

4. mark/unmark a line by a little dot (codemirror call it "breakpoint")

https://codemirror.net/demo/marker.html

...but, i don't know how to use it with tw

kindly,

christan

Jeremy Ruston

unread,

Sep 14, 2015, 9:05:49 AM9/14/15

to ch, TiddlyWiki

Hi ch

sadly, the highlight plugin doesn't support line numbers:

You may be able to adapt this technique to use CSS to add line numbers:

https://gist.github.com/potch/1243028

> create a tiddler which contain the raw c source code as plain text, then utilizing a new tiddler (transclude the source code tiddler...?) which can display the c source code, like this:

You should be able to do something like this:

<$edit-text tiddler="my code tiddler" tag="textarea"/>

With the codemirror plugin installed, the textarea will be replaced by a full codemirror instance. But, it won't be read-only, so it would be very easy to accidentally corrupt one of your code samples

> i don't want to replace the built-in tw editor with codemirror (not yet) - i only want to utilizing the "viewing features" of codemirror.

The TW5 plugin for codemirror doesn't support being used in that way at the moment.