Purchase Now

Code

Make your documentation easy and intuitive with the code highlight component.

Syntax Highlight

We are using Prism for syntax highlight. Full list of supported languages.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Hello World</title>

    <!-- css -->
    <link rel="stylesheet" href="assets/css/vendor.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
  </head>
  <body>


    <!-- js -->
    <script src="assets/js/vendor.js"></script>
    <script src="assets/js/app.js"></script>
  </body>
</html>
<pre><code class="language-markup"></code></pre>

You'll have to replace all < in the code you want to highlight with &lt;

Syntaxt Highlight with Tabs

This is a combination of card with tabs and syntax highlight

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Hello World</title>

    <!-- css -->
    <link rel="stylesheet" href="assets/css/vendor.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
  </head>
  <body>


    <!-- js -->
    <script src="assets/js/vendor.js"></script>
    <script src="assets/js/app.js"></script>
  </body>
</html>
body {
  > section,
  > footer {
    position: relative;
    margin: 0 auto;
    padding: 6.25rem 0;
    overflow: hidden;
  }
}
    Header: function (){
      $(document.body).headroom({
        tolerance : 10
      });
    },