<< Go back to Posts

Including files within a .md page with Jekyll.

Simple way to include an html file (or a text file) within your page.



Introduction

How to include an .html file in a markdown file interpreted and transformed by Jekyll into another .html file ?

  1. The .html must be put in the _includes/ folder.
  2. A tag must be inserted into the .mdf file using a liquid include tag with the path relatively to the _includes/ folder.

{% include <my_file_path_within_includes_folder> %}

Note: If you want to include examples about Jekyll, you need to create raw blocks Doc

Dummy File

We have _includes/foobar.html with content:

<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>

We include this file in our document with the following command:

{% include foobar.html %}

Giving the result:

This is an inline span Hello World element inside a paragraph.

The .html elements are executed.

Bokeh Example

Here is a Bokeh example from a previous project:

Political Blogosphere

Issue with Bokeh

It is possible that when including TWO BOKEH FILES that only the first one render correctly.

This seems to be a problem of <div> naming.

If you open the code explorer (ctrl + maj + C), you will see that the code is present, but not interpreted. For this, you need to modify Bokeh IDs so they are unique.

UPDATE: This is solved now. Check Including more two (or more) Bokeh plots

Including a PDF

If you want to include a pdf, the easier is to store the .pdf file in /assets/pdf/ (or any other suitable path).

You need to use the <embed> html tag:

<embed
  src="/assets/pdf/Eric-Prydz-Pjanoo.pdf"
  type="application/pdf"
  width="100%"
  height="400px"
/>

Which output as:

Here, you may need to customize height



>> You can subscribe to my mailing list here for a monthly update. <<