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

**URL:** <https://discourse.gohugo.io/t/highlight-html-unexpected-in-command-built-site-for-language-en/4468>\
**Category:** support\
**Created:** [November 2, 2016, 7:43pm UTC](https://discourse.gohugo.io/t/highlight-html-unexpected-in-command-built-site-for-language-en/4468 "2016-11-02T19:43:07Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andrea\_Bisello](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/andrea_bisello/32/2095_2.png) [@Andrea\_Bisello](https://discourse.gohugo.io/u/Andrea_Bisello)\
**Post date:** [November 2, 2016, 7:43pm UTC](https://discourse.gohugo.io/t/highlight-html-unexpected-in-command-built-site-for-language-en/4468/1 "2016-11-02T19:43:08Z")

</div>

Hi.

i need to insert pure HTML code inside single.html article. i’m reading this [https://gohugo.io/extras/shortcodes/](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

---

<div class="post-metadata">

**Author:** ![sairam](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sairam/32/2198_2.png) [@sairam](https://discourse.gohugo.io/u/sairam)\
**Post date:** [November 2, 2016, 7:55pm UTC](https://discourse.gohugo.io/t/highlight-html-unexpected-in-command-built-site-for-language-en/4468/2 "2016-11-02T19:55:56Z")

</div>

You can only the shortcodes inside the `content` directory.

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

---

<div class="post-metadata">

**Author:** ![sairam](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sairam/32/2198_2.png) [@sairam](https://discourse.gohugo.io/u/sairam)\
**Post date:** [November 2, 2016, 8:09pm UTC](https://discourse.gohugo.io/t/highlight-html-unexpected-in-command-built-site-for-language-en/4468/3 "2016-11-02T20:09:00Z")

</div>

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](https://gohugo.io/templates/functions/) and have been using it since morning

This is how can you do it.

```auto
{{ 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](https://github.com/spf13/hugo/blob/master/helpers/pygments.go) (which helped me understand the arguments)

---

<div class="post-metadata">

**Author:** ![Andrea\_Bisello](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/andrea_bisello/32/2095_2.png) [@Andrea\_Bisello](https://discourse.gohugo.io/u/Andrea_Bisello)\
**Post date:** [November 2, 2016, 8:22pm UTC](https://discourse.gohugo.io/t/highlight-html-unexpected-in-command-built-site-for-language-en/4468/4 "2016-11-02T20:22:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sairam](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/sairam/32/2198_2.png) [@sairam](https://discourse.gohugo.io/u/sairam)\
**Post date:** [November 2, 2016, 8:36pm UTC](https://discourse.gohugo.io/t/highlight-html-unexpected-in-command-built-site-for-language-en/4468/5 "2016-11-02T20:36:16Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![ITSecMedia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/itsecmedia/32/1552_2.png) [@ITSecMedia](https://discourse.gohugo.io/u/ITSecMedia)\
**Post date:** [November 2, 2016, 8:38pm UTC](https://discourse.gohugo.io/t/highlight-html-unexpected-in-command-built-site-for-language-en/4468/6 "2016-11-02T20:38:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Andrea\_Bisello](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/andrea_bisello/32/2095_2.png) [@Andrea\_Bisello](https://discourse.gohugo.io/u/Andrea_Bisello)\
**Post date:** [November 3, 2016, 8:58pm UTC](https://discourse.gohugo.io/t/highlight-html-unexpected-in-command-built-site-for-language-en/4468/7 "2016-11-03T20:58:13Z")

</div>

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” “” }}

---

<div class="post-metadata">

**Author:** ![quimica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/quimica/32/4006_2.png) [@quimica](https://discourse.gohugo.io/u/quimica)\
**Post date:** [August 28, 2017, 1:02pm UTC](https://discourse.gohugo.io/t/highlight-html-unexpected-in-command-built-site-for-language-en/4468/8 "2017-08-28T13:02:26Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![ITSecMedia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/itsecmedia/32/1552_2.png) [@ITSecMedia](https://discourse.gohugo.io/u/ITSecMedia)\
**Post date:** [August 28, 2017, 1:27pm UTC](https://discourse.gohugo.io/t/highlight-html-unexpected-in-command-built-site-for-language-en/4468/9 "2017-08-28T13:27:08Z")

</div>

@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/](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');

    }

}
```

---

<div class="post-metadata">

**Author:** ![quimica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/quimica/32/4006_2.png) [@quimica](https://discourse.gohugo.io/u/quimica)\
**Post date:** [August 28, 2017, 2:17pm UTC](https://discourse.gohugo.io/t/highlight-html-unexpected-in-command-built-site-for-language-en/4468/10 "2017-08-28T14:17:01Z")

</div>

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