usingHtmlJavaScriptCss.md

{% set title = "Using HTML, JavaScript, CSS" %} {% set filename = "usingHtmlJavaScriptCss" %} {{ title }}

title: "User Guide: {{ title }}" layout: userGuide.md pageNav: 2 [_User Guide → {{ title }}_]({{ filename }}.html)

{{ title }}

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.

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

html

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.

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

html

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:

1. Import the library via a CDN or locally.
2. Specify a target HTML element to render the chart.
3. 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.

{{ icon_example }} Here is an example of how to use Chart.js to create a pie chart.

HTML <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

<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>

{{ icon_example }} Here is an example of how to use Apache ECharts to create a bar chart.

HTML <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js"></script>

<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>

Using Custom CSS in MarkBind

You can apply your own custom CSS styles to customize how your site looks.

There are two common ways to add custom CSS in MarkBind:

1. Add a site-wide custom stylesheet

To apply styles across your whole site, create a file called styles.css (or similar), and add it to your site.json under head:

"head": [
  {
    "tagName": "link",
    "attributes": {
      "rel": "stylesheet",
      "href": "/styles.css"
    }
  }
]

{% from "njk/common.njk" import previous_next %}
{{ previous_next('components/advanced', 'tweakingThePageStructure') }}