I want a page in my website that looks sort of like Pastebin’s raw pastes, like this: https://pastebin.com/raw/WP0vQgij
I want visitors to be able to see a raw HTML or MD file. Is there a way I can do that?
Let’s say you have a blog post. You want to display content from another markdown file in that post. The secondary file should display in raw form. That secondary md file also resides in the _posts folder. This is the code you will add:
{%- capture rawContent -%}
{%- include_relative 2021-03-15-md-file-to-display-as-raw.md -%}
{%- endcapture -%}
<pre>{{- rawContent -}}</pre>
The capture command creates a rawContent variable. Whatever is contained within that capture statement is added to that variable. In this case, you include another markdown file you created specifically so the reader can see the content.
To display the variable, you add it just like any other variable, but it will render as text, rather than YML or HTML, per your requirement (note: I only tested this with an md file).
The content will display like a giant run-on sentence and may use a font that makes the code hard to read. That is why you display the content in a standard HTML pre tag, which will be sure your content displays using a fixed-width font and retains carriage returns.
Read more about Jekyll Includes and Capture here:
Read more about the pre tag here:
https://www.w3schools.com/tags/tag_pre.asp
Please note that with my example, the md file is located in the _posts folder, so keep that in mind when writing any logic that displays a list of posts and you do not want the md file to display.
1 Like
Starting from basics
If you want to write HTML or markdown inline, you can do this.
---
---
## Heading
Here is my HTML snippet
```html
<p>Hello world</p>
```
Here is my MD snippet
```html
**Hello world**
```
But if you have Liquid syntax like {{ }} or {% %} then you to ensure Jekyll does not render the code and rather keeps it as code.
Note use of raw tag below
---
name: World
---
## Heading
Here is my HTML snippet
```liquid
<p>Hello {{ page.name }}</p>
```
Here is my MD snippet
```liquid
**Hello {{ page.name }}**
```
But what if your snippet is a separate file?
In the case of a gist, you can use the script tag generated for you on a gist to pull that content in on the frontend - always up to date.
If you want to pull a file from another repo or the same repo, Jekyll has no built in way to do that. But forum discussions here talk about it.
Capture in general can be used to make it easy to write a multi line variable or to build a path or URL without having to use append or join.
Here the contents of capture block are evaluated as Liquid and stored as flat text as my_var string.
{% capture my_var %}
example.com/{{ page.name }}/greet.html
{% endcapture %}
Value:
{{ my_var }}
Which will give
Value:
example.com/World/greet.html
@BillRaymond I don’t think that is a good approach as the request was to stop Jekyll processing. Using include or include_relative does indeed evaluate the file.
e.g.
about.md
---
title: About
---
{{ page.title }}
Then using on `index.md as
---
---
My test
{% capture my_page %}
{% include_relative about.md %}
{% endcapture %}
```
My title: {{ my_page }}
```
Results in frontmatter and content rendered… but the Liquid code is missing.
My test
---
title: About
layout: page
permalink: /about/
---
My title:
So maybe you can find a way to use JS look up a file on GitHub and embed it - see older forum posts.
For interest, if you need to get a page (and not an includes or layout) and if you are happy with Liquid render, you can lookup the file like this:
---
title: Home
---
{% assign about = site.pages | where: 'name', 'about.md' | first %}
```liquid
{{ about.content }}
```
Here it renders in my browser as:
<p>My title: About</p>
That is actually as code snippet. Here is the raw HTML in the source.
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><p>My title: About</p>
</code></pre></div></div>
Note also that it rendered page.title of the About page and then the finished result got added as content on the homepage.
@TheKingElessar as @MichaelCurrin states, I misunderstood your question and believe he has a better response for you.
Could you share the use case for why you want to avoid the preprocessing and only display the markup?
1 Like
I want to demonstrate how Jekyll converts the markdown files to HTML files. Nothing too fancy, I just want visitors to be able to see what both look like. I could even do something as simple as pasting the file contents into a markdown code block, I’m pretty sure. I was just wondering what my options were.
All of these answers are very detailed, so thanks! I’ll take a closer look and try them out.
Sometimes I duplicate my content like this:
## Tutorial for bold text in markdown
Code:
```markdown
**Hello, world!**
```
Result:
**Hello, world!**
Note the lack of code fenceblocks at the end, so that the markdown gets actually rendered e.g. as <b>Hello, world!</b>.
If your snippets are large or you don’t want to have a pair drift, you can use capture to write the content just once and then reuse. Useful for markdown or CSS or even JS as those run in the browser - not so useful for other languages.
{% capture my_code %}
**Hello, world!**
{% endcapture %}
Code:
```markdown
{{ my_code }}
```
Result:
{{ my_code | markdownify }}
Note that the markdownify filter will render markdown as HTML but it will not render Liquid. i.e. Using {{ or {% will not get evaluated and so will appear as plain text in both the code and the result.
1 Like
If you want to embed an entire file as a snippet, I wrote a guide here, using JavaScript approach.
1 Like
Thank you for your detailed answers, those are great solutions for me! Thank you 
1 Like
Glad you found your answers.
Here is one my pages using code and then result on a Jekyll site. I pasted the result in the second block so it is all hardcoded.
I also used raw tag at the top of the page to stop Jekyll from evaluating the Liquid {{. In the case of markdown to HTML, raw tag can be left out because it stops liquid evaluating not markdown conversion
Click View Raw in GitHub for the plain text source.