Stackedit: Feature request: checklist rendering

[venkatd]

I prefer to publish my markdown files to gist and use checklists so that I can make guides that are easy to follow that you can check steps off as you go:

https://github.com/blog/1375-task-lists-in-gfm-issues-pulls-comments

Any plans to implement this feature? Thanks!

[andtheWings]

I also think this would be a nice feature to include. However, is this something that should be requested directly from PageDown? The app laverna has this functionality so maybe you could draw from their code (https://github.com/Laverna/laverna/blob/master/app/scripts/libs/checklist.js).

[benweet]

Is it supposed to update text editor while ticking the checkbox in the preview? It doesn't work with the live preview on laverna.

[andtheWings]

I don't think it has that capability. In order for checking or unchecking to update the markdown file, you need to have the editor closed. Laverna's iteration probably has limited usefulness within the the stackedit app, since it is always in live preview mode, but rendering of checklists would still be nice say if you are using Stackedit to publish an interactive document to Tumblr or elsewhere.

[seeb0h]

Here is a UserCustom extension for checkbox display. Using fontello icons.

Show like this

Usage with definition :
: [] unchecked box
: [*] checked box

Usage with bullets :

• [] unchecked box
• [*] checked box

Code :

userCustom.onPreviewFinished = function() {
    $('#preview-contents dd').each(function() {
        $(this).html(function(index,html){
            return html.replace(/\[\]/g,'<i class="icon-check-empty"></i>');
        });
        $(this).html(function(index,html){
            return html.replace(/\[\*\]/g,'<i class="icon-check"></i>');
        });
    });
    $('#preview-contents li').each(function() {
        $(this).html(function(index,html){
            return html.replace(/\[\]/g,'<i class="icon-check-empty"></i>');
        });
        $(this).html(function(index,html){
            return html.replace(/\[\*\]/g,'<i class="icon-check"></i>');
        });
    }); 
};

[Jonjoe]

Bump! Any news on this?

[eligrey]

:+1:

[Nikita240]

I modified the regex in @seeb0h's code to make it work more like github's task lists (although it's less strict).

That means these is all the acceptable definitions for an unchecked box:

- []
- [ ]
* []
* [ ]
: []
: [ ]

And for the checked box:

- [x]
- [X]
* [x]
* [X]
: [x]
: [X]

Code:

userCustom.onPreviewFinished = function() {
    $('#preview-contents dd').each(function() {
        $(this).html(function(index,html){
            return html.replace(/\[ ?\]/g,'<i class="icon-check-empty"></i>');
        });
        $(this).html(function(index,html){
            return html.replace(/\[X\]/ig,'<i class="icon-check"></i>');
        });
    });
    $('#preview-contents li').each(function() {
        $(this).html(function(index,html){
            return html.replace(/\[ ?\]/g,'<i class="icon-check-empty"></i>');
        });
        $(this).html(function(index,html){
            return html.replace(/\[X\]/ig,'<i class="icon-check"></i>');
        });
    }); 
};

[eikelben]

Can this same functionality be made to work in tables?

| | Kit 1 | Kit 2 | Kit 3 |
| --: | :-: | :-: | :-: |
| Item 1 | [x] | [x] | [] |
| Item 2 | [x] | [] | [] |

[rickyzhang82]

Thanks for sharing this. It looks great.

However, when I export it to HTML, it doesn't shows check box. How can I port this change in export to disk?

[benweet]

Task list added in v5.11.

[GARENFEATHER]

@benweet is it the latest version available on stackedit.io now?

_Sent from my PRO 6 using FastHub_

[benweet]

@GARENFEATHER absolutely.