Showdown: table - issue with Bootstrap css

[JerryYangJin]

Hello, I'm using showdown as my markdown editor/renderer, I'm also use twitter bootstrap

I found the table is not working as expected, the table structure is getting rendered, but it has no border, the cells are very close to each other, it looks like no css applied on the table.

bootstrap css seems to require class 'table' on table tag, like <table class="table">, the rendered table has no class.

Is there anyway to fix this?

Thank you!

[tivie]

You can use an extension that alters rendered tables and adds the proper class to them.

[obedm503]

I actually faced the same issue while working on bootmark. The way I went about it was to find all <table> elements, add the specific classes, and wrap them in a <div> to make responsive.

using jQuery because of cross-browser support and easy api. disclaimer: code wasn't tested

showdown.extension('myext', function () {
  return [{
    type: "output",
    filter: function (html, converter, options) {
      // parse the html string
      var liveHtml = $('<div></div>').html(html);
      $('img', liveHtml).each(function(){ 
        var table = $(this);
        // table bootstrap classes
        table.addClass('table table-sriped table-bordered')
        // make table responsive
        .wrap('<div class="class table-responsive"></div>');
      });
      return liveHtml.html();
    }
  }];
});

[JerryYangJin]

@tivie , @obedm503 , thanks for the reply, I'll test the extension and update

[JerryYangJin]

@obedm503 , your code works perfectly, thanks a lot!

[vanillajonathan]

Note that table-sriped is not a valid class, it is a typo. It should be table-striped.

Also the code in the extension looks up all img elements, it should look up table elements.

Here is the fixed code:

showdown.extension('bootstrap-tables', function () {
  return [{
    type: "output",
    filter: function (html, converter, options) {
      // parse the html string
      var liveHtml = $('<div></div>').html(html);
      $('table', liveHtml).each(function(){ 
        var table = $(this);
        // table bootstrap classes
        table.addClass('table table-striped table-bordered')
        // make table responsive
        .wrap('<div class="class table-responsive"></div>');
      });
      return liveHtml.html();
    }
  }];
});

[obedm503]

thanks for catching the typos @vanillajonathan

[altanom]

Above code needs JQuery. So maybe someone needs simple example...

showdown.extension('bootstrap-tables', {
    type: 'output',
    filter: (html) => {
        const regex = /<table>/g;
        return html.replace(regex, '<table class="table table-bordered">');
    },
});