Hugo: Add support for shortcodes in html files

[blg002]

{{% figure src="/assets/img/foo.png" %}} is outputting <div>HUGOSHORTCODE-1</div> in a static content page (/content/about/index.html). However it seems to work fine in all my blog (archetype) posts?

$  hugo version
Hugo Static Site Generator v0.13-DEV buildDate: 2014-11-24T18:04:18-05:00

It worked fine in v0.12-DEV

[bep]

OK, this is definitively my fault. Thanks for the report.

[bep]

OK, I'll admit it - I'm confused.

This works fine for my "static content page" (my about), but then your definition of that may differ.

Your page has a md file attached to it? A link to a Git repo or similar would be cool.

[spf13]

We don't process the contents of html files yet. If we did process them it would only be for the shortcodes.

[bep]

OK, now I understand. There is another issue related to this; I guess these files should (currently) just be copied as-is.

[spf13]

So right now html files aren't treated as content files (like markdown is). We've never built that support in. I suppose there is a good argument for them being treated exactly like markdown files.. In that they would have front matter, some delimiter and then content which would happen to be in the html markup. They wouldn't have things like a tag... just text and formatting.

It wouldn't be hard to support this. The question is "is that what people would 1. want, 2. expect 3. use?

An easy way to achieve this functionality today would be to name the file about.html.md. Then the markdown processor would hand it and since html is valid markdown it would just work.

[bep]

Understand; but in the meantime the line below should be removed or replaced with something that does the complete "shortcode dance" (ShortcodesHandle shoould do the trick):

https://github.com/spf13/hugo/blob/master/hugolib/handler_page.go#L84

[blg002]

The question is "is that what people would 1. want, 2. expect 3. use?

Assuming I'm understanding all this correctly. I would want, expect, and use shortcodes to be processed correctly everywhere but especially in any file within /content/. I am currently using them in files such as /content/about/index.html and it was working until i updated to v0.13-DEV. Here's a basic glimpse of what that file looks like.

/content/about/index.html

---
title: About
lede: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.'
---


<div>
  <section class="timeline-item">
    <div class="row">
      <div class="medium-6 column">
        <ul class="timeline-events">
          <li>Lorem ipsum dolor sit amet.</li>
          <li>Consectetuer adipiscing elit.</li>
        </ul>
      </div>
      <div class="medium-6 column">
        <div class="timeline-imgs">
          {{< figure src="/assets/img/about/foo.png" alt="" class="timeline-img transparent" caption="Aenean commodo ligula eget dolor" >}}
        </div>
      </div>
    </div>
  </section>

[spf13]

I think the challenge is that this is content, not a template. I'm worried people would use it like a template.

[blg002]

I'm not sure i fully grok the concern. I don't think anything I listed above isn't content. I would only ever want to use shortcodes in content.

Also, i just renamed the file to index.html.md and am now getting:

FATAL: 2014/11/25 Fail to replace short code tokens in index.html:
illegal state in content; shortcode token #1 is missing or out of order
CRITICAL: 2014/11/25 Errors rendering pages: illegal state in content; shortcode token #1 is missing or out of order

For now I'll just use raw HTML

[mohae]

fyi, I get this error when generating the hugo/doc site using tip, Go 1.4rc2, and #663 on Windows:

PS C:\goapps\hugo\docs> ..\hugo.exe server
ERROR: 2014/12/02 Unable to locate template for shortcode 'fig' in page migrate-from-jekyll
0 draft content
0 future content
86 pages created
15 tags created
0 groups created
in 345 ms
Serving pages from C:\goapps\hugo\docs\public
Web Server is available at http://localhost:1313
Press ctrl+c to stop

[bep]

@mohae not related, see https://github.com/spf13/hugo/pull/692

I believe @spf13 have to decide what the behaviour should be here.

[mohae]

@bjornerik thanks, I wasn't sure after reading through this issue and thought I should mention it just in case.

[radomirml]

+1 for enabling shortcodes in html content files. I have a use case where internal Confluence documentation space is exported to a set of html files that I want to process as a part of a static site created using Hugo. Due to lack of shortcodes ("relref" specifically) links between documentation pages are broken. (I'm still new with Hugo so not sure if there's another way to do this.)

[bep]

@spf13 any fresh thoughts on this one?

[grex84]

+1 for enabling shortcodes in html content files.

In my particular case I have created a drag and drop content builder which writes the generated html file to the content directory. Instead of generating the html for the shortcode types (images, calendar, etc) inside the content file i would like that only their shortcodes are used and hugo will process them.

If any shortcode's html needs to be changed all i need to do is modify the shortcode html in the hugo shortcode directory rather than regenerating all content files through the builder with the newly applied changes.

Can anyone confirm that changing the file extension to .md would be enough to serve this purpose?

Thanks

[bep]

@spf13 any fresh thoughts on this one?

[Dieterbe]

An easy way to achieve this functionality today would be to name the file about.html.md. Then the markdown processor would hand it and since html is valid markdown it would just work.

unfortunately it's not quite this easy. I'm transitioning from pyblosxom to hugo, and copying my posts into content/post/<file>.<ext>. (with modified header to be in hugo format of course), if i use .md as extension, then it doesn't just treat html as html; it treats html as html and also interprets as markdown. meaning if you have something like <br/>\n, the <br/> will be applied because it's html but _also_ the newline gets converted to <br/>. worse, 2 <br/>\n become empty paragraphs (<p></p>), this creates way too much whitespace

so anyway, big +1 to supporting shortcodes in html content, so i can store my posts as html (but have processing applied for syntax highlighting etc)

[bep]

OK, mr @spf13 says this is a good idea, so I'm adding shortcode support for HTML files ... Now.

[bep]

This is now added. Good if someone could take this for a spin ...

[Dieterbe]

works for me. all my html posts have syntax highlighting now :) thanks!

[heyarviind]

@bep @Dieterbe I am still confused, can you please explain how to use shortcodes in HTML file which is in the content folder.

I am using .html files instead of .md files in content folder

[andradei]

I'm trying to use a custom shortcode on my home page, defined in file {my-project-dir}/layouts/index.html without success.

parse failed: template: index.html:7: unexpected "<" in command

[computator]

The documentation for this is rather unclear as to if shortcodes are supported in anything besides markdown. I was glad to find this issue stating that yes, they in fact are.

In particular I was wanting to use ref and relref in html pages. I was unable to find any other method for dynamically setting the proper resolved urls for links in html templates or content pages. It wouldn't be that practical to have to redo all the links to a particular page if the url was changed in the target page's metadata.