Eleventy: Including Source code in Markdown file

[donalfitzpatrick]

I'm using Eleventy to develop a course website for a module on an undergrad degree. I'd like to be able to include complete C programs rather than copy-and-pasting the code into the markdown between relevant fence tags. This means that if I modify my program the updated file is included. is this possible?

Thanks in advance.

[tannerdolby]

Are you looking to run already compiled machine code for an entire C program within a markdown file? and are you wanting this C program to be interactive on the page?

Since Eleventy is built with Node.js, this should be possible. I think your looking to use a Native Addon (ie a binary file that is compiled from C or C++) which can then be loaded at runtime to perform some operations with JS.

You can load in a 'Native addon' using CommonJS syntax with require in a .js file, but you could also use a global JS file in the _data directory or a client side script.

Node.js at the lowest level is written with C and C++ so this means it can communicate with other programs written in C/C++. Using a Dynamic-link library (.dll extension), Node.js can load an external C or C++ .dll file at runtime and utilize its API to perform some operations in the C code using JavaScript.

When compiling the .dll binary code, it should exported as .node (or .js, .json) so that Node can handle importing these formats.

// importing a 'Native Addon'
const binaryFile = require('../path-to-binary-file.node');

module.exports = (eleventyConfig) => {
    // use javascript to perform operations on binaryFile
}

I hope this helps you get going in the right direction. Have a look at Loading C/C++ code with Node.js for more info. Goodluck!

[donalfitzpatrick]

Thanks very much for the reply that's extremely useful. However all I want to do is include the text of the source file. In essence I currently write sample programs which I give to students and just copy-and-paste the code into my markdown content. I'd like to just have an include statement or similar which gets the file contents and includes it.

[tannerdolby]

Your welcome! So if I'm understanding correctly, you have some code written in C within a source file. You want to include the text content of that source file in a markdown page for the students to easily copy/paste?

If there is a markdown file week-one.md

title: Lecture for week one
permalink: "/lectures/{{ title | slug }}/"
---

This is a markdown file which the text of the source file will be included in.

Within the markdown file you will have some fenced code in opening and closing backticks containing the source code from your C or C++ filename.c file.

Code snippet with source file code from some-file.c
std:in 
std:out 

Instead of having to add the source code from another file ie calculateArea.c into markdown for your students to be able to copy and paste, you would like to read the file contents of the source code file and then include it in your template files .md?

[donalfitzpatrick]

That's exactly it. Your explanation is far better than my original .

[tannerdolby]

Okay I've got it. What you need to do is:

1. create an _includes folder within the root of your Eleventy project.
2. Add the C/C++ source code files into the _includes directory
3. Then include the files you need in a template or markdown file using {% include "filename.c" %}
4. Lastly, make sure to wrap the include statements in opening and closing back ticks so they are properly formatted code snippets with your source code text content.

```opening ticks
{% include filename.c %}
```closing ticks

Project structure:

• root
  
  
  
  • _includes
  
  
  • filename.c
  
  
  • calcArea.c
  
  

[donalfitzpatrick]

Ah goodness I had tried the include but not from the includes directory. I had the c source in the same directory as the markdown for organisational purposes. Thanks very much for clarifying.

[tannerdolby]

No problem. I'm glad to help you get things resolved. One more thing to note, you can add this to your eleventy Config file (.eleventy.js) if you want to specify certain directories.

```
module.exports = (eleventyConfig) => {
return {
dir: {
includes: "_includes",
data: "_data"
}
};
}

[pdehaan]

I had the c source in the same directory as the markdown for organisational purposes. Thanks very much for clarifying.

This should be possible. By default Markdown should be preprocessed by liquidjs engine, so you may or may not need quotes around the {% include %} tag for it to import properly.
Ref: https://raw.githubusercontent.com/pdehaan/11ty-1527/master/src/posts/test-md/index.md

[tannerdolby]

Like @pdehaan mentioned, you do not need to wrap the filename in quotes inside the include statement. It could just be {% include filename.c %}. Another note, wrapping template content in a {% raw %} stuff {% endraw %} block will keep the raw text and escape any nunjucks related stuff like {{ var }} or HTML that would be preprocessed.

[donalfitzpatrick]

Working a treat, thank you both for your help.

[tannerdolby]

Your welcome! @donalfitzpatrick