Jekyll lets you write HTML in your Markdown files which will be passed straight through the Jekyll build process and end up on the final page. This can be very handy for sprucing up your site.

Simple styling#

Since you can use any HTML you like, if you want to make some red text you just have to write it as:

<span style="color: red">some red text</span>

Kramdown, which is the default markdown engine, provides an alternate way to specify HTML attributes by prepending them with {: attribute="value" } e.g.

{: style="color: red;" }

This paragraph will be red. Yep, the whole thing. Lorem Ipsum Delores Laverne
Shirley Thelma Louise...

While this is a touch shorter, it’s not portable—you couldn’t switch markdown engines without breaking your site.

You can also add some page-specific styling. For example, to make <kbd> elements look pretty you could add some CSS to make your keyboard shortcuts look like CTRL+S.

<style>
kbd {
  font-size: 0.95em;
  padding: 0.1em 0.15em;
  border-radius: 0.2em;
  border: 1px solid #666;
  box-shadow: 0.15em 0.15em #aaa;
  background: white;
  text-decoration: none;
}
</style>

<kbd>CTRL</kbd>+<kbd>S</kbd>

Using JavaScript#

One of the benefits to being able to mix HTML and Markdown is the fact that you can pull JavaScript libraries in from anywhere and use them in your pages.

For example, to add ChartJS (a JavaScript library that makes adding quick dynamic charts to your site easy) you just need to copy and paste the “script tag” from cdnjs, so that having this in your source .md file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>

<!-- the following example is modified from https://www.chartjs.org/docs/latest/ -->

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    }
});
</script>

will end up looking like this on the final website:

The <script> tag in this example pulls a script in from an external (non-ANU) website—in this case from https://cdnjs.cloudflare.com. In some lab exam situations, external requests like this are blocked; so be careful if you use this technique on pages your students will need in lab exams.

arrow-left bars search times