New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature request: checklist rendering #324
Comments
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). |
Is it supposed to update text editor while ticking the checkbox in the preview? It doesn't work with the live preview on laverna. |
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. |
Here is a UserCustom extension for checkbox display. Using fontello icons. Usage with definition : Usage with bullets :
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>');
});
});
}; |
Bump! Any news on this? |
👍 |
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:
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>');
});
});
}; |
Can this same functionality be made to work in tables?
|
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? |
Task list added in v5.11. |
@GARENFEATHER absolutely. |
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!
The text was updated successfully, but these errors were encountered: