{{< highlight html >}} - unexpected "<" in command Built site for language en:

support
1

Hi.

i need to insert pure HTML code inside single.html article. i’m reading this https://gohugo.io/extras/shortcodes/ .

using

{{< highlight html >}}

  <div id="test" style="background-color: red; width:300px; height:30px;"></div>
  
{{< /highlight >}}

when i run hugo i obtain

Started building sites …
ERROR: 2016/11/02 19:37:52 template.go:477: template: /home/ubuntu/workspace/themes/after-dark/layouts/_default/baseof.html:21: unexpected “<” in command
Built site for language en:
0 draft content
0 future content
0 expired content
98 pages created
0 non-page files copied
11 paginator pages created
0 categories created
0 tags created
total in 2677 ms

how to use highlight?

thanks

2

You can only the shortcodes inside the content directory.

You should use partials if you want to use in your theme files.

3

Sorry. Ignore my previous answer. I tried couple of days ago and figured there was no way to do it. Today I found this doc on functions and have been using it since morning

This is how can you do it.

{{ highlight `<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
  <div class="header">` "html" "" }}

last argument is the pygments option that needs to be passed.

link to code (which helped me understand the arguments)

4

My need is to embed dynamic generated html as html and not as text in the templare. I will try with your code. Thanks for your advices

5

Well, if you can fit/stuff what ever you are generating in a partial. You can achieve this with the following

{{ $a := partial "footer" . }}
{{ highlight $a "html" "" }}
6

Hmm, when you dynamically generate content, you could go a step further and consider to dynamically load that in the hugo rendered site. I use vue,js 2.0 on my Hugo site.

7

Thanks to all for the advices.

if someone else needs the code snippet, he can use this to embed the html code.

{{ highlight $.Params.htmlcode “html” “” }}

1 Like
8

@ITSecMedia Can you please share examples of Hugo+Vue.js? For example, a multilingual site that reloads using AJAX and a theme switcher that reloads a stylesheet? I’ve read about Pjax (a jQuery plugin for dynamic content) in another thread. Can Vue.js replace Pjax? Thanks

9

@quimica : I’ve replaced Vue already with pure JavaScript

All you have to do is to add the tag below in your markdown file and assign the corresponding attribute

<div class="widget" data-type="your_php_api_get_parameter"></div>

On this website you can see it live: https://www.unzegoldpreis.de/ JS loads the spot price in the header.

=== app.js ===

"use strict";

function encodeQueryData(data){
    let ret = [];
    for (let d in data)
        ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
    return ret.join('&');
}

function widget(){
    // <div class="widget" data-type="your_php_api_get_parameter"></div>
    let widgets = Array.from(document.getElementsByClassName("widget"));
    for (let widget of widgets) {
        let type = widget.dataset.type;

        let data = { 'type': type };
        let querystring = encodeQueryData(data);
        let fetch_url = '/api/index.php?' + querystring;
        fetch(fetch_url, {
            method: 'get'
        })
        .then(function(response) {
            if (response.status === 200) {
                response.text().then(function(data) {
                    widget.innerHTML = data;
                });
            }
        })
        .catch(function(err) {
            // Error
        });
    }
};

$( document ).ready(function() {
    widget();
});

Put both in your /static folder like

  • /static/js/app.js
  • /static/api/index.php
=== index.php ===

<?php

// header("Content-Type:text/html; charset=utf-8");
// header("Access-Control-Allow-Origin: *");

if ($_GET) {

    $_type = $_GET["type"];

    switch ($_type)
    {
        case "your_php_api_get_parameter":
            echo @file_get_contents('http://www.other-domain.com/api');
            break;

        default:
            echo @file_get_contents('some other remote api');

    }

}
1 Like
10

Thanks a lot! I’m going to test it as soon as I get a chance.