Formatting TaskPaper Examples in Blog Posts

TaskPaper
1

What are some of you using to format TaskPaper examples when publishing them in blog posts?

Which among you are exporting…

  1. TaskPaper into HTML from a tool like @mattgemmell’s TaskPaperRuby?
  2. Just pasting raw text in a pre tag or something?
  3. Using screenshots or animated gifs?

I’ve done 2 and 3.

I have to mention that I mostly use TaskPaper’s notes and header lines, a rarely use the dashed, todo line. In my blog posts, I show examples of how I use TaskPaper for rewriting my thoughts (rewriting my mental models, and something I call have-done lists).

For option 3 (screenshots and animated gifs), it was the simplest approach for Medium articles (like this one) or when including examples in an email for a course.

For option 2 (a TaskPaper example pasted inside a pre tag), it allowed me to use the <mark> tag to highlight changes to my list without having to use animated gifs. Here’s an article using option 2.

This second option has some benefits:

  • Like I said, I can decorate parts of my list (using <mark>) to bring one specific part of my list to the attention of the reader
  • It’s readable in an RSS reader, since it’s just a pre tag
  • People can copy-paste my examples back into TaskPaper

But it has some disadvantages:

  • I have to convert tabs to 2 spaces, to make sure that it formats nicely. That’s not so huge, because if I copy/paste this space-formatted list in TaskPaper, it’ll interpret it correctly back into tabs (thanks Jesse!)
  • I have to use a horizontal scroll so that the reader can read longer lines that I don’t want to wrap to new lines (unindented)

I thought of a fourth option:

  1. a pre tag by default, but a JavaScript parser which converts the pre tag in a bunch of nested ul’s, to make sure I don’t rely on horizontal scrolling, and having stuff indent even when wrapping lines. RSS readers will default to the pre, visitors to my site will get the nicely styled, indented, no-horizontal-scrolling TaskPaper examples.

But then readers would lose the ability to copy-paste the example back into TaskPaper (unless I add a Copy button in the top-right of each JavaScript-augmented example, yuck).

Anybody else blogging TaskPaper examples?

2

Not quite what you are after, but an interesting approach, I think, to generating a blog from minimal text markup (in this case org-mode rather than TaskPaper, but not entirely dissimilar):

https://her.esy.fun/posts/new-blog-modern.html

3

Hi Pascall,

I think that your case is pretty unique since I get the idea you are posting your code into some sort of tutorial blog where you want people to follow you. You might try to use highlight.js to better format your code using some of the syntaxes available in Highlight.js. Just try it using codepen (google highlights codepen example) and see if that is what you want (try the markup language syntax as an experiment and see how it looks). I think it will give you something closer to what you are trying to accomplish without all the extra code or work involved. Just paste the raw text in a pre tag as the examples show and then go to town.

If you want to highlight tags, or change the format of the Projects, tasks, etc, you can create your own language within Highlight.js. I created my own RouterOs language within Highlights and since I keep all my notes within the Quiver App, that work has made a tremendous difference in presenting all the code the way I want. I just looked at the code for another language within Highlights, and then modified it till it did what I wanted.

Hope this helps.