GitHub task list support

[dvorka]

I often use GitHub task lists and miss their support in Discount. Would it be possible to consider task list support as a new feature? It could be enabled/disabled using a MKD_* flag and rendered e.g. as unicode characters ☐ and ☑

Thank you for Discount - keep up the great work you do!

[Orc]

What does the html generated by that feature look like?

[dvorka]

GitHub renders task list as follows (inspect HTML of the bullet below - but they use own CSS):

• [x] todo
• [ ] done

I would prefer something simple like:

<ul>
<li>&#x2610; todo</li>
<li>&#x2611; done</li>
</ul>

Which is rendered as:

• ☐ todo
• ☑ done

Perhaps you could add list-style-type: none; style on ul to hide dots. Would it be acceptable?

[Orc]

Ooof, the github markdown source for - [x]/- [ ] is just loaded with side-effects (using the <input> tag, then larding everything down with css to tweak the presentation to fit.)

I will need to consider using html entities like you suggest or <input> like github's doing, but note that the github implementation allows checkboxes in the same list as bulleted (and not just bulleted; I can stuff the github checkmarks into a numeric list and it "works") items:

• Hello, I'm a
• [ ] nightmare
• [x] disaster
• of web interface design!

So the CSS to strip off the item marker will need to be done on a list-item basis.

Let me poke at the list mangling code. It's a fairly easy pattern match to check for [ ] and [x] at the start of a list item, and then I just have to push a css requirement into the container for that item, but I'm running out of flag bits for optional behavior and might have to break the interface to add a runtime flag for this into the code.

[dvorka]

You are right and I appreciate your systematic approach. Thank you!

[Orc]

Take a look at pass 1 (in the branch github_checklist); some or all of it may change over time, but this branch appears to work and produces only slightly hideous output with mixed lists.

[tessus]

Let me poke at the list mangling code. It's a fairly easy pattern match to check for [ ] and [x] at the start of a list item

can you also check for a capital X? [X]

I can submit a PR, if you want. It's just a minor change:

else if ( (strncmp(T(t->text)+t->dle, "[x]", 3) == 0) || (strncmp(T(t->text)+t->dle, "[X]", 3) == 0) )

[Orc]

Even more minor than that! strncasecmp() instead of strncmp() gets both [x] and [X] in the same expression.

Still kind of ugly, though.

[tessus]

Yep, you're right. I usually use mem access functions or direct string manipluation. I totally forgot that strncasecmp existed. :-)

[dvorka]

@Orc this is exactly what I wanted! Thank you :+1:

BTW, to make branch compilable w/o GitHub task list enabled, there is probably missing #ifdef GITHUB_CHECKBOX/#else around htmlify/listcontent I listed below:

@@ -1771,7 +1799,7 @@ listdisplay(int typ, Paragraph *p, MMIOT* f)
Qprintf(f, ">\n");

for ( ; p ; p = p->next ) {
-           htmlify(p->down, "li", p->ident, f);
+           listcontent(p->down, p->flags, f);
            Qchar('\n', f);
        }

[tessus]

@Orc Currently you have to use a compile flag to activate the changes in your github_checklist branch. Wouldn't it be better to use another MKD_ flag, eg.: MKD_GITHUBCHECKBOX?

[tessus]

@Orc another problem is that when you use an input checkbox (f533bdb51248b5daa55d4a2474f36ccb71284539), you can actually uncheck and check the boxes. This is very confusing, because this action doesn't change the file and unless you do a reload of the page with circumventing the cache, it will show inaccurate check boxes.

[Orc]

1st; I can't use another MKD_ flag without breaking the published interface, because the flags are stored in a 32 bit integer and I've already got 32 of them defined. So for the short term it's gotta be configured with the --github-checkbox option to configure.sh

2nd; That's how github does it :-) I'm still worrying away at the code, so it's still subject to change (I WISH that css allowed me to set arbitary html entities as item bullets, because then I'd just pass in explicit styling that set the bullet to ☐, ☑ or ☒, but, alas, css only lets me set images as item bullets.)

[tessus]

1st; I can't use another MKD_ flag without breaking the published interface, because the flags are stored in a 32 bit integer and I've already got 32 of them defined. So for the short term it's gotta be configured with the --github-checkbox option to configure.sh

Thanks for the explanation.

2nd; That's how github does it :-)

This is true. But on github, the owner of the comment (or whoever is allowed to change a comment) can just check and uncheck items and the corresponding markdown (comment/text) is changed automatically.

(I WISH that css allowed me to set arbitary html entities as item bullets, because then I'd just pass in explicit styling that set the bullet to ☐, ☑ or ☒, but, alas, css only lets me set images as item bullets.)

Yes, that would be awesome.

[arendtio]

@Orc I just came across this issue while I was trying to find a solution for not rendered tasks ;-)

Just to add some opinion: I think discount (as a converter from Markdown to HTML) should render tasks as checkboxes. Replacing checkboxes with some read-only form like unicode characters should be up to the CSS/JS skills of someone who wants to display them that way. If you want to make it clear that clicking on them won't change anything, rendering them as 'disabled' might be a valid option.

Btw. you don't have to fetch the HTML from the Github Issue, as there is a spec for Github Flavoured Markdown: https://github.github.com/gfm/#task-list-items-extension-

[Orc]

It doesn't support the "disabled" attribute right now (I just tweaked the code to put that attribute in, but "disabled" -- at least on (my)macOS safari w/o me defining a github_checkbox css that emboldifies the thing -- dims the checkboxes almost to invisibility,) but if github checkboxes are configured with "--github-checkbox=input" then it does those as html checkboxes.

(huh, bizarre rendering here on github -- code spans inside double quotes grow whitespace around them. Either it's a css feature or something broken in stackoverflowmark?)

[kupiqu]

Is --github-checkbox option only usable as a flag for discount or can it also be used with the library somehow?

[Orc]

It's a configuration setting, and applies to everything.

[kupiqu]

It's a configuration setting, and applies to everything.

I see, but I understand that one needs to compile it with that configuration setting. I use a package from Ubuntu/Debian and unfortunately it seems it's not set by default.

[kupiqu]

In other words, Debian/Ubuntu devs might not be aware of all config options, and particularly the new ones... Might setting this option by default in the configuration script cause any harm? If not, then all Discount users that are not compiling themselves would benefit.

EDIT: Should I open a different issue for this default config request? Please let me know

[kupiqu]

I compiled discount and see this working, as well as the difference between --github-checkbox and --github-checkbox=input. For Kmail the difference is just a matter of style (nicer with the input option), given that sent emails are read only.

However, I couldn't find a way to hide the dots before the checkboxes, as in here:

• [ ] nightmare
• [x] disaster

Is it supported?

[Orc]

You need to style those markers out of existence, like in this source fragment:

<style>
.github_checkbox { list-style-type: none; }
</style>

* [x] this is set
* [ ] this is not
* and this is a regular list item

[kupiqu]

Oh, I see. I missed that part. Thank you.

[Orc]

And about the config request; if it's really important that it be runtime configurable please open another issue for it. There's at least one flag (MKD_STRICT) that I think I can blow away and make into a complex flag that's all the stuff that STRICT turns off (at the cost of a major version change because it changes the published interface.)

[kupiqu]

And about the config request; if it's really important that it be runtime configurable please open another issue for it. There's at least one flag (MKD_STRICT) that I think I can blow away and make into a complex flag that's all the stuff that STRICT turns off (at the cost of a major version change because it changes the published interface.)

Great! I will... It will help a lot for users of projects such as Kmail, Thanks!

[kupiqu]

You need to style those markers out of existence, like in this source fragment:

<style>
.github_checkbox { list-style-type: none; }
</style>

* [x] this is set
* [ ] this is not
* and this is a regular list item

sorry to bother you again with this, but I tried that and it doesn't seem to work, could you please test it?

[Orc]

If you're testing it with the markdown program, you need to pass -style as a command line option; eg: markdown -style < checkbox.text

[kupiqu]

I tried Kmail and mkd2html. Both give the same result. I do:

mkd2html test, where test is a file with the content you mentioned:

<style>
.github_checkbox { list-style-type: none; }
</style>

* [x] this is set
* [ ] this is not
* and this is a regular list item

[Orc]

I don't know how Kmail handle stylesheets, but mkd2html doesn't do inline styles; you need to supply the styles in a stylesheet (included by the -css argument)

[kupiqu]

Would you know how to add the style for github chechboxes in the css file? I would highly appreciate a little help 😊

[Orc]

Create a file checkbox.css containing the line

.github_checkbox { list-style-type: none; }

and run mkd2html -css checkbox.css with your regular input & output

[kupiqu]

Thank you

[kupiqu]

Create a file checkbox.css containing the line

.github_checkbox { list-style-type: none; }

and run mkd2html -css checkbox.css with your regular input & output

Mmm, it doesn't work even after doing it this way :/

[Orc]

This is how I did it on my unix machine:

orc@pie(discount)> cat testghc.css
.github_checkbox { list-style-type: none; }

orc@pie(discount)> cat testghc.text
* [x] this is set
* [ ] this is not
* and this is a regular list item
orc@pie(discount)> mkd2html -css testghc.css testghc.text
orc@pie(discount)> cat testghc.html
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional //EN">
<html>
<head>
  <meta name="GENERATOR" content="mkd2html 2.2.6 TAB=8 DEBUG GITHUB_CHECKBOX">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet"
        type="text/css"
        href="testghc.css" />
  <title></title>
</head>
<body>
<ul>
<li class="github_checkbox">&#x2611; this is set</li>
<li class="github_checkbox">&#x2610; this is not</li>
<li>and this is a regular list item</li>
</ul>

</body>
</html>
orc@pie(discount)> open testghc.html

Note that I'm starting the browser (via open) in the same directory as the css file. If you start the browser in another directory it won't find that css file and you'll need to specify the entire path to it before it works. In the case of Kmail, the github_checkbox will have to be set within whatever css Kmail already uses, but that is oh so much not within the scope of discount.

[kupiqu]

I'll check it out when I get back to my computer but I did as you, yet my html looked different.

Is this a branch different than master?

[Orc]

I need to see the html

[kupiqu]

I got it working, finally! It works with markdown and with mkd2html

I think that somehow my configuration was reset to default without the github_checkbox option. I guess I did it myself I don't know how, once I set the proper config and rebuild, everything came back to the expectation.

Sorry for the noise.

[btw, Kmail has an option for css style, I will check if setting the github_checkbox style in there works]