Showdown CSS needs to be self-contained

[smalers]

Need Sofia to work on this in the Angular demo app, but I am adding here since there is cross-over with InfoMapper.

As I understand it, the Showdown CSS currently depends on bootstrap CSS. However, changing that could alter more fundamental components in the application. We need a way to change CDSS for the Showdown-generated HTML that is independent of the CSS for core application CSS such as bootstrap. That is the point of CSS in the first place. The following are things I would like to be able to configure in CSS:

• General styles such as fonts
• Table formatting
• Image and caption positioning

See the Poudre Trails example. View the documentation by clicking on information icon next to Poudre Trails layer (next to the on/off slider).

[smalers]

Need Sofia to post links here if there are any useful articles.

Here is my understanding of the issue:

1. Showdown relies on bootstrap CSS. Therefore, to change Showdown-generated HTML, you have to change the bootstrap CSS (bad, because that would impact the entire app). Or, insert html elements in the Markdown, which gets passed through to the result. This is OK for some things but we don't want to rely on it for most users.
2. Showdown does not have any function parameter to specify a CSS. This would be a good suggestion for the developer of that tool. Either it does not exist or is not documented.

Based on the above, it seems like the best option at the moment is to write some code that takes the Showdown-generated HTML and inserts a reference to CSS file that we control. In this case, need to:

1. Create a css file to be used with Showdown and put it somewhere that makes sense. To customize the application, this could go in assets. A built-in default CSS would also be good. So, default CSS and allow a custom CSS in assets.
2. Write code that processes the HTML after showdown does its thing. This code would insert necessary HTML to indicate the default and optional CSS.
3. Get the above working in the demo tool and then Josh can implement in InfoMapper.

[gsofia23]

In order to have control over Showdown specific elements, an extension is required to create a new syntax. Therefore adding default classes for each Showdown generated HTML element is necessary.

A lot of people use css ui kits like bootstrap, semantic-ui and require default class names for html elements.

<h1 class="showdown_h1">1st Heading</h1>
<h2 class="showdown_h2">2nd Heading</h2>
<ul class="showdown_ul">
  <li class="showdown_li">first item</li>
  <li class="showdown_li">second item</li>
</ul>

Showdown does not support this out of the box. But you can create an extension to accomplish this:

const showdown = require('showdown');

const classMap = {
  h1: 'showdown_h1',
  h2: 'showdown_h2',
  ul: 'showdown_ul',
  li: 'showdown_li'
}

const bindings = Object.keys(classMap)
  .map(key => ({
    type: 'output',
    regex: new RegExp(`<${key}(.*)>`, 'g'),
    replace: `<${key} class="${classMap[key]}" $1>`
  }));

const conv = new showdown.Converter({
  extensions: [...bindings]
});

After incorporating these classes, changing CSS can be specific to Showdown generated elements with these default class names:

.showdown_table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    display: block;
  }
  
  .showdown_td, .showdown_th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  
  .showdown_tr:nth-child(even) {
    background-color: #dddddd;
  }

  
.showdown_h1 {
  font-weight: bold;
  color: #cc0099;
  font-size: 62px;
}

.showdown_h2 {
  font-weight: bold;
  color: #3399ff;
  font-size: 24px;
}

Credits for this extension go to @zusamann (original issue can be consulted here).

Updated by @Kameelridder (original issue can be consulted here)

[gsofia23]

This created extension can be found within app.module.ts:
https://github.com/OpenWaterFoundation/owf-app-viz-demo-ng/blob/master/viz-demo-ng/src/app/app.module.ts#L42

Two style sheets are provided to demonstrate styling abilities:
https://github.com/OpenWaterFoundation/owf-app-viz-demo-ng/tree/master/viz-demo-ng/src/assets/css

• showdown_style00.css : exiting CSS styling moved to its own file for showdown specific elements,

• showdown_style01: a clear representation of styling showdown elements, color changes to showdown headings expected within this example. Allows styling changes to be clear to viewer. Non-showdown elements remain the same.

To incorporate these external CSS style sheets:

Place all CSS in assets/css folder as such:

assets/css/style1.css
assets/css/style2.css
assets/css/style3.css

Following this, import the stylesheet's reference in the global style.css:

@import 'assets/css/style1.css';
@import 'assets/css/style2.css';
@import 'assets/css/styel3.css';

Additionally providing the showdown element tag within a div can also aid in customizing CSS. Here this div element is used to add font styling to Showdown generated text.

   <div class="showdown-container"> <showdown src='assets/app-content/content-pages/showdown-demos/custom-css.md'></showdown></div>

.showdown-container{
    font: 12px/1.5 Helvetica Neue,Arial,Helvetica,sans-serif; 
  }

[Nightsphere]

After reading through Sofia's comments, the InfoMapper now has the option to change a CSS file (assets/css/showdown-default.css for right now) that will change only the Showdown HTML, whether a doc button in the sidebar or a Content Page.

[Nightsphere]

I believe the functionality has been completed. Closing this issue.