feat(moreStyling): add some useful classes for css styling

Currently, only adds the class `task-list-item-complete` to completed tasks items in GFM tasklists.
But in the future, each time a css class is deemed to be necessary, should be added under this umbrella
option.

Closes #540

README.md

@@ -5,7 +5,6 @@
 [![npm version](https://badge.fury.io/js/showdown.svg)](http://badge.fury.io/js/showdown)
 [![Bower version](https://badge.fury.io/bo/showdown.svg)](http://badge.fury.io/bo/showdown)
 [![Join the chat at https://gitter.im/showdownjs/showdown](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/showdownjs/showdown?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[![Greenkeeper badge](https://badges.greenkeeper.io/showdownjs/showdown.svg)](https://greenkeeper.io/)
 [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/tiviesantos)
 
 ------
@@ -17,11 +16,9 @@ Showdown can be used client side (in the browser) or server side (with NodeJs).
 
 Check a live Demo here http://demo.showdownjs.com/
 
-## [![Patreon](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/bePatron?u=11141581)
-
 As you know, ShowdownJS is a free library and it will remain free forever. However, maintaining and improving the library costs time and money.
 
-If you like our work and find our library useful, please donate through [patreon](https://www.patreon.com/showdownjs) or directly through [paypal](https://www.paypal.me/tiviesantos)!! Your contribution will be greatly appreciated and help me continue to develop this awesome library.
+If you like our work and find our library useful, please donate through [paypal](https://www.paypal.me/tiviesantos)!! Your contribution will be greatly appreciated and help me continue to develop this awesome library.
 
 ## License
 
@@ -369,6 +366,10 @@ var defaultOptions = showdown.getDefaultOptions();
 
  * **splitAdjacentBlockquotes**: (boolean) [default false] Split adjacent blockquote blocks.(since v.1.8.6)
 
+ * **moreStyling**: (boolean) [default false] Adds some useful classes for css styling. (since v2.0.1)
+    
+    - Tasklists: Adds the class `task-list-item-complete` to completed tasks items in GFM tasklists.
+
 **NOTE**: Please note that until **version 1.6.0**, all of these options are ***DISABLED*** by default in the cli tool.
 
 

src/options.js

@@ -166,6 +166,11 @@ function getDefaultOpts (simple) {
       description: 'Split adjacent blockquote blocks',
       type: 'boolean'
     },
+    moreStyling: {
+      defaultValue: false,
+      describe: 'Adds some useful styling css classes in the generated html',
+      type: 'boolean'
+    },
     relativePathBaseUrl: {
       defaultValue: false,
       describe: 'Prepends a base URL to relative paths',

src/subParsers/makehtml/lists.js

@@ -40,7 +40,7 @@ showdown.subParser('makehtml.lists', function (text, options, globals) {
     // attacklab: add sentinel to emulate \z
     listStr += '¨0';
 
-    var rgx = /(\n)?(^ {0,3})([*+-]|\d+[.])[ \t]+((\[(x|X| )])?[ \t]*[^\r]+?(\n{1,2}))(?=\n*(¨0| {0,3}([*+-]|\d+[.])[ \t]+))/gm,
+    var rgx = /(\n)?(^ {0,3})([*+-]|\d+[.])[ \t]+((\[([xX ])])?[ \t]*[^\r]+?(\n{1,2}))(?=\n*(¨0| {0,3}([*+-]|\d+[.])[ \t]+))/gm,
         isParagraphed = (/\n[ \t]*\n(?!¨0)/.test(listStr));
 
     // Since version 1.5, nesting sublists requires 4 spaces (or 1 tab) indentation,
@@ -48,7 +48,7 @@ showdown.subParser('makehtml.lists', function (text, options, globals) {
     // activating this option reverts to old behavior
     // This will be removed in version 2.0
     if (options.disableForced4SpacesIndentedSublists) {
-      rgx = /(\n)?(^ {0,3})([*+-]|\d+[.])[ \t]+((\[(x|X| )])?[ \t]*[^\r]+?(\n{1,2}))(?=\n*(¨0|\2([*+-]|\d+[.])[ \t]+))/gm;
+      rgx = /(\n)?(^ {0,3})([*+-]|\d+[.])[ \t]+((\[([xX ])])?[ \t]*[^\r]+?(\n{1,2}))(?=\n*(¨0|\2([*+-]|\d+[.])[ \t]+))/gm;
     }
 
     listStr = listStr.replace(rgx, function (wholeMatch, m1, m2, m3, m4, taskbtn, checked) {
@@ -59,8 +59,13 @@ showdown.subParser('makehtml.lists', function (text, options, globals) {
 
       // 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 () {
+
+        // Style used for tasklist bullets
+        bulletStyle = ' class="task-list-item';
+        if (options.moreStyling) {bulletStyle +=  checked ? ' task-list-item-complete' : '';}
+        bulletStyle += '" style="list-style-type: none;"';
+
+        item = item.replace(/^[ \t]*\[([xX ])?]/m, function () {
           var otp = '<input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"';
           if (checked) {
             otp += ' checked';

test/functional/makehtml/cases/features/moreStyling/tasklists-with-styling.html

@@ -0,0 +1,4 @@
+<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>

test/functional/makehtml/cases/features/moreStyling/tasklists-with-styling.md

@@ -0,0 +1,2 @@
+- [ ] test
+- [x] testing complete

test/functional/makehtml/testsuite.features.js

@@ -19,6 +19,7 @@ var bootstrap = require('./makehtml.bootstrap.js'),
     completeHTMLOutputSuite = bootstrap.getTestSuite('test/functional/makehtml/cases/features/completeHTMLOutput/'),
     metadataSuite = bootstrap.getTestSuite('test/functional/makehtml/cases/features/metadata/'),
     splitAdjacentBlockquotesSuite = bootstrap.getTestSuite('test/functional/makehtml/cases/features/splitAdjacentBlockquotes/'),
+    moreStyling = bootstrap.getTestSuite('test/functional/makehtml/cases/features/moreStyling/'),
     http = require('http'),
     https = require('https'),
     expect = require('chai').expect;
@@ -320,4 +321,16 @@ describe('makeHtml() features testsuite', function () {
       it(suite[i].name.replace(/-/g, ' '), assertion(suite[i], converter));
     }
   });
+
+  /** test moreStyling option **/
+  describe('moreStyling option', function () {
+    var converter,
+        suite = moreStyling;
+
+    for (var i = 0; i < suite.length; ++i) {
+      converter = new showdown.Converter({moreStyling: true, tasklists: true});
+      it(suite[i].name.replace(/-/g, ' '), assertion(suite[i], converter));
+    }
+  });
+
 });