MarkBind - User Guide: Using HTML, JavaScript, CSS

Using HTML, JavaScript, CSS

A MarkBind source file can contain a mixture of HTML, JavaScript, and CSS as a normal web page would.

Markdown in HTML

Text within HTML tags are considered plain text unless the text is preceded by a blank line, in which case the text is parsed as Markdown text.

Example Here is an example of how text within an HTML tag is parsed as Markdown when preceded by a blank line.

CODE:

<div>
Without preceding blank line: Apples **Bananas** Cherries
</div>

<div>

With preceding blank line: Apples **Bananas** Cherries
</div>

OUTPUT:

Without preceding blank line: Apples **Bananas** Cherries

With preceding blank line: Apples Bananas Cherries

Alternatively, you can use <markdown> (for block Markdown elements such as headings) or <md> (for inline Markdown elements such as bold/italic text) tags to indicate the text should be treated as Markdown.

Example Here is an example of how text within an HTML tag can be treated as Markdown using <markdown>/<md> tags.

CODE:

<div>
<md>Apples **Bananas** Cherries</md>
</div>

<div>
<markdown>##### Apples **Bananas** Cherries</markdown>
</div>

OUTPUT:

Apples Bananas Cherries

Apples Bananas Cherries

JavaScript libraries

External JavaScript libraries can be included in MarkBind to add a wide range of features and functionalities. One such use case is to add a charting library for data visualization.

Charts

Popular chart libraries such as Chart.js and Apache ECharts can be used in MarkBind to create beautiful charts, similar to how they are used in any HTML web page. The details of how to use these libraries are beyond the scope of this section, but you can find more information on their websites. In general, you will perform these 3 steps:

Import the library via a CDN or locally.
Specify a target HTML element to render the chart.
Initialize the chart with the data and options.

As mentioned in the above section, you should not leave any blank lines within HTML elements to prevent MarkBind from parsing the contents as Markdown instead of code/text.

Example Here is an example of how to use Chart.js to create a pie chart.

CODE:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<div style="width:400px;height:400px;">
  <canvas id="myChart"></canvas>
</div>
<script>
// Get the 2d context of the canvas (of where we want to draw the chart)
const ctx = document.getElementById('myChart').getContext('2d');
// Instantiate the Chart class with the data for the pie chart
const myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3],
            backgroundColor: [
              'rgb(255, 99, 132)',
              'rgb(54, 162, 235)',
              'rgb(255, 205, 86)'
            ]
        }]
    }
});
</script>

OUTPUT:

Example Here is an example of how to use Apache ECharts to create a bar chart.

CODE:

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js"></script>
<div id="echart" style="width:400px;height:400px;"></div>
<script type="text/javascript">
  // Initialize the echarts instance based on the prepared DOM
  var eChart = echarts.init(document.getElementById('echart'));
  // Specify the configuration items and data for the chart
  var option = {
    title: {
      text: 'ECharts Getting Started'
    },
    xAxis: {
      data: ['Shirts', 'Cardigans', 'Chiffons']
    },
    tooltip: {},
    yAxis: {},
    series: [
      {
        name: 'sales',
        type: 'bar',
        data: [5, 20, 36]
      }
    ]
  };
  // Display the chart using the configuration items and data just specified.
  eChart.setOption(option);
</script>

OUTPUT:

Advanced Component Usage

Tweaking the Page Structure