Showdown: Add complete class to the tasklist list element

[zeraphie]

With the following markdown:

- [ ] test
- [x] testing complete

The following html is rendered:

<ul>
    <li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled="" style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> test</li>
    <li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled="" style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked=""> testing complete</li>
</ul>

The li element that contains the complete item should have an additional class of something like task-list-item-complete as follows:

<ul>
    <li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled="" style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> test</li>
    <li class="task-list-item task-list-item-complete" style="list-style-type: none;"><input type="checkbox" disabled="" style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked=""> testing complete</li>
</ul>

As it makes styling the completed list items impossible without writing an extension to override this (and I'm not sure I can figure out a way to add the class with one...

I'd appreciate a little help on this :) (I could open a PR for it too)

on this line

change

      // Support for github tasklists
      if (taskbtn && options.tasklists) {
        bulletStyle = ' class="task-list-item" style="list-style-type: none;"';
        item = item.replace(/^[ \t]*\[(x|X| )?]/m, function () {
          var otp = '<input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"';
          if (checked) {
            otp += ' checked';
          }
          otp += '>';
          return otp;
        });
      }

to

      // Support for github tasklists
      if (taskbtn && options.tasklists) {
        bulletStyle = ' class="task-list-item' + checked ? ' task-list-item-complete' : '' + '" style="list-style-type: none;"';
        item = item.replace(/^[ \t]*\[(x|X| )?]/m, function () {
          var otp = '<input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"';
          if (checked) {
            otp += ' checked';
          }
          otp += '>';
          return otp;
        });
      }

[bunyevacz]

You can use the :checked pseudo-class.
MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

No need to add additional css class to make a distinction between checked and unchecked checkbox.

[golarajahangir]

@bunyevacz you cannot style the task text with :checked, this will just select input and not its text.