[TW5] external code file in code block

[Alex H]

Hey guys,

Little background to my question:
I have a directory with all kind of code snippets - from C++ to CSS. As you can imaging, the usefulness of this code collection does not scale very well - I lost the overview quite a while ago ;-)
So I thought, I might need some meta information, like tags and stuff to filter the files - tiddlywiki for the rescue! Maybe?

So my idea is:
I want to keep the original code files, it is just more convenient that way to reuse them. I want a tiddler for each to my code snippets, for example like this

--------------------------------------------------------------------------------------------------------------------
title: Javascript side of ajax call to django backend
tags: js, ajax, django, jquery, code-snippet

then some commentary text blablabla....

maybe some links to jquery reference on ajax calls blablabla...

and here the actual code in a code block
```
something like
include /home/alex/development/code_snippets/ajax_js_to_django.js
```

--------------------------------------------------------------------------------------------------------------------


So the problem is, I can include external textfiles using the method Tobias Beer pointed out here http://tobibeer.github.io/tb5/#Embedding%20A%20Text%20File (thanks for this nice trick), but sadly this does not work in a code block, since everything is treated as plain text...

So, perhaps someone has a little trick to get around this?

Edit: fixed wrong link

Thanks

[PMario]

Hi Alex,

IMO it doesn't need to work in a code block. The embedded object is the code block.

just use.

title: Javascript side of ajax call to django backend
tags: js, ajax, django, jquery, code-snippet

then some commentary text blablabla....

maybe some links to jquery reference on ajax calls blablabla...

and here the actual code in a code block

<object data="test.txt"
    type="text/plain"
    style="width:100%;height:400px;" scrolling:yes>
  <a href="test.txt" target="_blank">lorem.txt</a>
   (missing or not supported)
</object>

instead of the "style" attribute, I'd use a class="myExternalFileClass" So you can change the CSS styles much easier


<object data="test.txt"
    type="text/plain"
    class="myExternalFileClass"
    scrolling:yes>
  <a href="test.txt" target="_blank">lorem.txt</a>
   (missing or not supported)
</object>

Imo that should do what you want. To make it more flexible, you can cover the stuff inside a macro.  see: http://tiddlywiki.com/#Macro%20Definitions%20in%20WikiText

Create a tiddler includeCodeStyles and tag it with $:/tags/Stylesheet

.includeCode {
  width:100%;
  height:400px;
}

Create a tiddler eg: includeCodeMacros and tag it $:/tags/Macro

\define includeCode(file type:"text/plain" class:"includeCode" emptyText:" - missing or not supported" )
<object data="$file$" type="$type$" scrolling:yes class="$class$">  <a href="$file$" target="_blank">$file$</a>$emptyText$</object>
\end

use it with:

<<includeCode file:"test.txt">>

or import the attached includeCode.json snipptes. The attachment worked for me.

have fun!
mario

[Alex H]

IMO it doesn't need to work in a code block. The embedded object is the code block.

Yeah, I wanted to use the nice syntax highlight plugin for the code blocks ( http://tiddlywiki.com/plugins/tiddlywiki/highlight/index.html ) - but I think it shouldn't be a huge problem to use highlight.js directly ( https://github.com/isagalaev/highlight.js ).

 
Thanks a lot for your examples - very useful!

Sidenote: at first I didn't get them to work - then I figured out that you can't just enter a path if you are on the node.js version of tiddlywiki, which makes sense...
I have now http-server running ( https://github.com/indexzero/http-server ), so I can access the files via http://localhost:8080/home/alex/somefolder/somefile.txt. I'm usually a bit allergic against making things more complicated, but I think there is no other way to do this if you are using the node.js version and I really enjoy some of the advantages of node.js version - so I guess that's the way to go for me...
It's no big deal, I have a startupscript for my wikis anyway, so that's a good place to fire up http-server as well...

Thanks again mario for your valuable input and help!!!

Edit: typo

[PMario]

On Monday, August 10, 2015 at 2:10:03 PM UTC+2, Alex H wrote:

Yeah, I wanted to use the nice syntax highlight plugin for the code blocks ( http://tiddlywiki.com/plugins/tiddlywiki/highlight/index.html ) - but I think it shouldn't be a huge problem to use highlight.js directly ( https://github.com/isagalaev/highlight.js ).

You should have mentioned this in your first post, because this changes the whole problem. I have no experience with the highlight plugin, so someone else may jump in here.
 

Thanks a lot for your examples - very useful!

glad I could help.
 

Sidenote: at first I didn't get them to work - then I figured out that you can't just enter a path if you are on the node.js version of tiddlywiki, which makes sense...
I have now http-server running ( https://github.com/indexzero/http-server ), so I can access the files via http://localhost:8080/home/alex/somefolder/somefile.txt. I'm usually a bit allergic against making things more complicated, but I think there is no other way to do this if you are using the node.js version and I really enjoy some of the advantages of node.js version - so I guess that's the way to go for me...
It's no big deal, I have a startupscript for my wikis anyway, so that's a good place to fire up http-server as well...

Yes. That's the way, the web works. TW server isn't intended to be a general purpose file server, like eg: nginx and imo it shouldn't. There is absolutely no need to reinvent the wheel again. So using battle tested proxies is the way to go, if you need to serve / access files. ...

-mario

[Alex H]

You should have mentioned this in your first post, because this changes the whole problem...

You're absolutely right, I was just so in the problem that I forgot to mention it...
Also, I completely forgot that syntax highlighting was a plugin, I thought it was build in to tiddlywiki. If only I had a system to document stuff like this - oh right ;-)