add renderMarkdown to ICompiler

src/compiler.ts

@@ -43,6 +43,8 @@ export class Compiler implements ICompiler {
         return { content, metadata, renderedContent };
     }
 
+    public renderMarkdown = (markdown: string) => marked(markdown, this.markedOptions);
+
     /**
      * Converts the content string into an array of `ContentNode`s. If the
      * `contents` option is `html`, the string nodes will also be rendered with
@@ -51,7 +53,7 @@ export class Compiler implements ICompiler {
     private renderContents(content: string, reservedTagWords: string[]) {
         const splitContents = this.parseTags(content, reservedTagWords);
         return splitContents
-            .map((node) => typeof node === "string" ? marked(node, this.markedOptions) : node)
+            .map((node) => typeof node === "string" ? this.renderMarkdown(node) : node)
             .filter((node) => node !== "");
     }
 

src/plugins/kss.ts

@@ -21,8 +21,16 @@ export interface IKssModifier {
 export interface IKssExample {
     /** Raw documentation string. */
     documentation: string;
-    /** HTML markup for example, with `{{.modifier}}` templates. */
+    /**
+     * Raw HTML markup for example with `{{.modifier}}` templates,
+     * to be used to render the markup for each modifier.
+     */
     markup: string;
+    /**
+     * Syntax-highlighted version of the markup HTML, to be used
+     * for rendering the markup itself with pretty colors.
+     */
+    markupHtml: string;
     /** Array of modifiers supported by HTML markup. */
     modifiers: IKssModifier[];
     /** Unique reference for addressing this example. */
@@ -39,10 +47,10 @@ export class KssPlugin implements IPlugin<IKssPluginData> {
     public constructor(private options: kss.IOptions) {
     }
 
-    public compile(cssFiles: IFile[], { objectify }: ICompiler) {
+    public compile(cssFiles: IFile[], dm: ICompiler) {
         const styleguide = this.parseFiles(cssFiles);
-        const sections = styleguide.sections().map(convertSection);
-        const css = objectify(sections, (s) => s.reference);
+        const sections = styleguide.sections().map((s) => convertSection(s, dm));
+        const css = dm.objectify(sections, (s) => s.reference);
         return { css };
     }
 
@@ -57,18 +65,19 @@ export class KssPlugin implements IPlugin<IKssPluginData> {
     }
 }
 
-function convertSection(section: kss.ISection): IKssExample {
+function convertSection(section: kss.ISection, dm: ICompiler): IKssExample {
     return {
-        documentation: section.description(),
+        documentation: dm.renderMarkdown(section.description()),
         markup: section.markup() || "",
-        modifiers: section.modifiers().map(convertModifier),
+        markupHtml: dm.renderMarkdown(`\`\`\`html\n${section.markup() || ""}\n\`\`\``),
+        modifiers: section.modifiers().map((mod) => convertModifier(mod, dm)),
         reference: section.reference(),
     };
 }
 
-function convertModifier(mod: kss.IModifier): IKssModifier {
+function convertModifier(mod: kss.IModifier, dm: ICompiler): IKssModifier {
     return {
-        documentation: mod.description(),
+        documentation: dm.renderMarkdown(mod.description()),
         name: mod.name(),
     };
 }

src/plugins/plugin.ts

@@ -58,6 +58,11 @@ export interface ICompiler {
      * is.
      */
     renderBlock: (blockContent: string, reservedTagWords?: string[]) => IBlock;
+
+    /**
+     * Render a string of markdown to HTML, using the options from `Documentalist`.
+     */
+    renderMarkdown: (markdown: string) => string;
 }
 
 export interface IPlugin<T> {