# Rendering code blocks properly from .md files

**URL:** <https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126>\
**Category:** support\
**Created:** [June 11, 2019, 1:14am UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126 "2019-06-11T01:14:28Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![freethebit](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/freethebit/32/8908_2.png) [@freethebit](https://discourse.gohugo.io/u/freethebit)\
**Post date:** [June 11, 2019, 1:14am UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/1 "2019-06-11T01:14:28Z")

</div>

This is a bug or its a feature?

When having a code block after a list, no matter how many new lines, the code block is rendered inside the list. Even if you have a list, after that a title, after that a code block. In this last case, both, title and code block are rendered inside the list.

 ![Screenshot%20from%202019-06-10%2022-10-29](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/7/7c5288aa0c702598a8a253a051de70251a22ecd2.png)

I expect the _example 1_, the code to be rendered in the list, but not _example 2_ and _example 3_. Any other render works fine except what hugo uses.

The only way to break this circle is to put a text like that is going to be rendered as `p` between the list and the next stuff.

---

<div class="post-metadata">

**Author:** ![frjo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/frjo/32/18626_2.png) [@frjo](https://discourse.gohugo.io/u/frjo)\
**Post date:** [June 11, 2019, 4:53am UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/2 "2019-06-11T04:53:43Z")

</div>

I can replicate example 1 and 2 but not 3 when using Blackfriday. I believe this is a bug, [https://github.com/russross/blackfriday/issues](https://github.com/russross/blackfriday/issues).

I also tested with Mmark (also built in to Hugo) and then all three examples works as they should. So my suggestion is to switch to Mmark, I believe it’s better maintained.

> **[Supported Content Formats](https://gohugo.io/content-management/formats/)**
>
> Both HTML and Markdown are supported content formats.

---

<div class="post-metadata">

**Author:** ![freethebit](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/freethebit/32/8908_2.png) [@freethebit](https://discourse.gohugo.io/u/freethebit)\
**Post date:** [June 12, 2019, 3:38pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/3 "2019-06-12T15:38:47Z")

</div>

Is there a way to set `mmark` as default render in hugo without having to set `markup = "mmark"` in front matter or changing the `.md` files to `.mmark`?

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [June 12, 2019, 4:46pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/4 "2019-06-12T16:46:38Z")

</div>

You could run this script from the root of your `content` dir. It will recursively rename all `*.md` files to `*.mmark`.

If you don’t have your site in a git repo, then definitely take a backup before doing this.

```bash
#!/bin/bash

ext_old="md"
ext_new="mmark"

files="$(find . -type f -name "*.$ext_old")"

for file in $files; do
  basename="$(basename "$file")"
  filename="${basename%.*}"
  dirname="$(dirname "$file")"
  echo mv "$file" "$dirname"/"$filename"."$ext_new"
  mv "$file" "$dirname"/"$filename"."$ext_new"
done

```

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [June 12, 2019, 6:01pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/5 "2019-06-12T18:01:14Z")

</div>

@freethebit I cannot recreate the issue you are seeing.

- Here’s the [markdown file](https://raw.githubusercontent.com/kaushalmodi/ox-hugo/master/test/site/content/posts/src-block-following-a-list.md).
- Here’s the [Hugo-generated HTML](https://ox-hugo.scripter.co/test/posts/src-block-following-a-list/).

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [June 12, 2019, 6:04pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/6 "2019-06-12T18:04:42Z")

</div>

Actually let me take that back…

I see the issue with:

````auto
- list item 1
- list item 2

```
echo "hello"
```

- another list item 1
- another list item 2

````

But not with:

````auto
- list item 1
- list item 2

```text
echo "hello"
```

- another list item 1
- another list item 2

````

Notice the ````text` 😄.

---

<div class="post-metadata">

**Author:** ![freethebit](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/freethebit/32/8908_2.png) [@freethebit](https://discourse.gohugo.io/u/freethebit)\
**Post date:** [June 12, 2019, 6:05pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/7 "2019-06-12T18:05:56Z")

</div>

Thanks for the reply, but this is not a option for me. I’m looking for a static site generator that use something that properly render markdown `.md` files and default syntax and the content files a wide compatible with other tools. Since there is no global setup for this, I’m moving on my actual project to another static site generator.

Speed is good as long it properly render the content.

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [June 12, 2019, 6:06pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/8 "2019-06-12T18:06:32Z")

</div>

And here’s another workaround:

````auto
- list item 1
- list item 2

<!--list-end-->

```
echo "hello"
```

````

(I happen to know these shortcomings of Blackfriday as I have written an Emacs Org mode to Blackfriday compatible Markdown generator 😄.)

---

<div class="post-metadata">

**Author:** ![freethebit](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/freethebit/32/8908_2.png) [@freethebit](https://discourse.gohugo.io/u/freethebit)\
**Post date:** [June 12, 2019, 6:09pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/9 "2019-06-12T18:09:06Z")

</div>

> [@kaushalmodi](#):
>
> en to know these shortcomings of Blackfriday a

My opinion on this: its ugly, I don’t use shortcodes for a reason, mix stuff that is not content to content. If I need to use shortcode, I do not use.

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [June 12, 2019, 6:09pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/10 "2019-06-12T18:09:57Z")

</div>

> [@freethebit](#):
>
> I don’t use shortcodes for a reason

I am in the same camp.

---

<div class="post-metadata">

**Author:** ![freethebit](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/freethebit/32/8908_2.png) [@freethebit](https://discourse.gohugo.io/u/freethebit)\
**Post date:** [June 12, 2019, 6:11pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/11 "2019-06-12T18:11:25Z")

</div>

I’m going to play with 11ty today and see how it goes. The sad part, is that I only notice it after developed a theme for hugo and made the setup CI / CD on gitlab.

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [June 12, 2019, 6:33pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/12 "2019-06-12T18:33:01Z")

</div>

Good luck!

Here’s what’s keeping me with Hugo:

- While the Blackfriday dependency sucks, the workarounds are not bad (there’s a glimmer of hope that Hugo will switch to the commonmark Go library at some point).
- Speed!
- Static binary (I don’t need Ruby, node.js, etc. dependencies)
- Apart from Markdown parsing, there are many things that make up a static site generator and Hugo is great in all those areas… few I can think of: the bundle system, resources, data files, theme inheritance, etc.
- COMMUNITY! (this forum right here)

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [June 12, 2019, 7:48pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/13 "2019-06-12T19:48:39Z")

</div>

No if statement to check for the MD file extension in the event the OP is including images or other files inside the content dir?

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [June 12, 2019, 7:51pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/14 "2019-06-12T19:51:21Z")

</div>

Hi @rdwatters. If I’m understanding your question correctly, then this line from the above only returns the files with the relevant extension.

```nohighlight
files="$(find . -type f -name "*.$ext_old")"

```

---

<div class="post-metadata">

**Author:** ![mojoa](https://avatars.discourse-cdn.com/v4/letter/m/8491ac/32.png) [@mojoa](https://discourse.gohugo.io/u/mojoa)\
**Post date:** [June 12, 2019, 8:52pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/15 "2019-06-12T20:52:29Z")

</div>

> [@freethebit](#):
>
> My opinion on this: its ugly, I don’t use shortcodes for a reason, mix stuff that is not content to content. If I need to use shortcode, I do not use.

> [@kaushalmodi](#):
>
> I am in the same camp.

Could you elaborate a bit on this? Or provide a link to discussion on this topic?  
I am very curious about the reasoning for not using shortcodes. Thanks!

---

<div class="post-metadata">

**Author:** ![mojoa](https://avatars.discourse-cdn.com/v4/letter/m/8491ac/32.png) [@mojoa](https://discourse.gohugo.io/u/mojoa)\
**Post date:** [June 12, 2019, 11:17pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/16 "2019-06-12T23:17:30Z")

</div>

Thanks for creating a separate thread.

> [@About preference to not use shortcodes](https://discourse.gohugo.io/t/about-preference-to-not-use-shortcodes/19169):
>
> Continuing the discussion from [Rendering code blocks properly from .md files](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/15): @mojoa It’s just my personal preference to not use shortcodes. The source of content for my sites is in Org mode ([https://orgmode.org](https://orgmode.org)). What Hugo does using shortcodes can already be done (mostly) using Org macros. I call Org mode an “active” markup language… because it can be powered using Emacs-Lisp. Markdown on the other hand is “passive”. To give smarts to Markdown, things like Hugo shortcodes are needed. Once…

---

<div class="post-metadata">

**Author:** ![rdwatters](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rdwatters/32/2848_2.png) [@rdwatters](https://discourse.gohugo.io/u/rdwatters)\
**Post date:** [June 13, 2019, 3:55am UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/17 "2019-06-13T03:55:18Z")

</div>

Oops. You abstracted that part too, which is awesome. Sorry for the sloppy feedback, @zwbetz, and thank you for sharing; I’ll likely be using this sooner rather than later😊

---

<div class="post-metadata">

**Author:** ![freethebit](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/freethebit/32/8908_2.png) [@freethebit](https://discourse.gohugo.io/u/freethebit)\
**Post date:** [June 14, 2019, 11:51pm UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/18 "2019-06-14T23:51:54Z")

</div>

After testing everything that I could the only option acceptable is what you showed:

````
```text
echo "hello"
```

````

Specifying the code language in every single block.

Is this a case to have in the documentation a explicit note about the need to specify the programming language when using code block?

---

<div class="post-metadata">

**Author:** ![freethebit](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/freethebit/32/8908_2.png) [@freethebit](https://discourse.gohugo.io/u/freethebit)\
**Post date:** [June 15, 2019, 2:05am UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/19 "2019-06-15T02:05:42Z")

</div>

It helps in one way but mess up the hole thing,

````
- Item 1

- Item 2

    ```zzz
    code
    ```

- Item 3

````

It make ‘item 3’ as sub level of ‘item 2’. The expected result was the code to be inside ‘item 2’.

Without the ‘zzz’ the thing keep it well formatted.

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [June 15, 2019, 3:54am UTC](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126/20 "2019-06-15T03:54:27Z")

</div>

> [@freethebit](#):
>
> need to specify the programming language when using code block?

You could try the option `pygmentsCodeFencesGuessSyntax`: [Configure Hugo | Hugo](https://gohugo.io/getting-started/configuration/#configuration-file)

[Next page](https://discourse.gohugo.io/t/rendering-code-blocks-properly-from-md-files/19126.md?page=2)