(JavaScript) Markdown to HTML - Full Document, Custom Theme with Code Syntax Highlighting

See more Markdown Examples

Demonstrates how to convert a complete Markdown document to HTML using your own custom theme with Cloudfare Prism's code syntax highlighting.

Note: This example requires Chilkat v11.2.0 or greater.

Note

This example is intended for running within a Chilkat.Js embedded JavaScript engine. All Chilkat JavaScript examples require Chilkat v11.4.0 or greater.

var success = false;

success = false;

var options = new CkJsonObject();

// Instead of specifying a "theme", provide values for the HTML document parts.

var sbHead = new CkStringBuilder();
var bCrlf = true;
sbHead.AppendLine("<head>",bCrlf);
sbHead.AppendLine("<style>",bCrlf);
sbHead.AppendLine("body {",bCrlf);
sbHead.AppendLine("  font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;",bCrlf);
sbHead.AppendLine("}",bCrlf);
sbHead.AppendLine("</style>",bCrlf);
sbHead.AppendLine("</head>",bCrlf);

// Each HTML section can be set individually.
options.UpdateString("docType","<!DOCTYPE html>");
options.UpdateString("rootElement","<html lang=\"en\">");
options.UpdateString("head",sbHead.GetAsString());
options.UpdateString("bodyStart","<body>\n<div id=\"content\"");
options.UpdateString("bodyEnd","</div>\n</body>");

// We can add extra content to the bottom of the HTML head and body sections like this:
// Here we are using the Cloudfare Prism "coy" theme for code syntax higlighting.
options.UpdateString("extraHead","<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-coy.min.css\" />");
options.UpdateString("extraBody","<script src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js\"></script><script src =\"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js\"></script>");

var sbMarkdown = new CkStringBuilder();
var sbHtml = new CkStringBuilder();

success = sbMarkdown.LoadFile("qa_data/markdown/test1.md","utf-8");
if (success == false) {
    console.log(sbMarkdown.LastErrorText);
    return;
}

sbMarkdown.MarkdownToHtml(options,sbHtml);
sbHtml.ToCRLF();

console.log(sbHtml.GetAsString());

// The sample markdown input for this example is identical to the one at Markdown to HTML - Full Document, Raw, where you can view it.

// Sample HTML output as viewed in a browser:

//