We recently built an Angular application for displaying documentation in Markdown using the ngx-markdown library from NPM. We followed the directions in the readme file on GitHub and things generally went well for standard markdown. However, we ran into an issue when we started using tables. By default, the tables rendered in markdown do not display a border. This resulted in some really ugly UI that wasn't acceptable for our application.
If you inspect the page (right click the page in Chrome->Inspect), you will see the HTML output uses a traditional <table> tag so we thought we could just apply some custom CSS like so:
table, th, td {
border: 1px solid black;
padding: 20px;
}We saved our changes, waited for the application to recompile, and stared at the exact same ugly, no-border-having table that we had before?!?
Turns out the fix for this was not straight forward and took a fair amount of time to figure out. After troubleshooting, we determined it had to do with how Angular was encapsulating the output of the markdown so it wasn't picking up the CSS. To fix it, you have to set the view encapsulation setting in the code behind like so:
@Component({
selector: 'app-documentation',
templateUrl: './documentation.component.html',
styleUrls: ['./documentation.component.css'],
encapsulation: ViewEncapsulation.None
})Once this was done, the table output picked up the CSS and applied the border properly. The end result is we now have an Angular application that can easily serve Markdown files for documentation with custom formatting to make the UI look exactly the way we want.
At C2 Labs, we love solving the hardest full-stack development problems and coming up with innovative solutions that meet our customer's business requirements. Contact us today to learn more or schedule a no cost consultation to learn how C2 Labs can serve as a digital transformation catalyst for your business.