Is it possible to write javascript inside apache echarts shortcode

support
,
1

I am now using Hugo FixIt theme (GitHub - hugo-fixit/FixIt: 🔧 A clean, elegant but advanced blog theme for Hugo 一个简洁、优雅且高效的 Hugo 主题) right now . However the default echarts shortcode / codefences does not allow me to write javascript ( see this example ) inside .

Here is the relevant file :

  1. FixIt/layouts/partials/assets.html
  2. FixIt/layouts/shortcodes/echarts.html
  3. FixIt/layouts/partials/plugin/echarts.html . For the last file , I modify the code as below :
    {{- /* Echarts support for code fences extended and shortcodes. */ -}}
{{- $width := .Options.width | default "100%" -}}
{{- $height := .Options.height | default "30rem" -}}
{{- $attrs := printf `style="width: %v; height: %v;"` $width $height -}}
<div class="echarts" {{ $attrs | safeHTMLAttr }}></div>
<script>
  // eval the text between {{< echarts >}} and {{< /echarts >}}
  (function() {
    {{ .Inner | safeJS }}
  })();
</script>
{{- /* EOF */ -}}

but it does not work . Do you guys have any suggestions :slight_smile: ?

And : how to make all the javascript variables / const local inside the shortcodes ?

BTW sorry for lack of links , since I am a new user , I am not allow to put more than 2 links .

2

I just change the default FixIt/layouts/partials/plugin/echarts.html , here is my code :

<!-- FixIt/layouts/partials/plugin/echarts.html -->
{{- /* Echarts support for code fences extended and shortcodes. */ -}}
{{- $width := .Options.width | default "100%" -}}
{{- $height := .Options.height | default "30rem" -}}
{{- $id := printf "echarts-%d" now.UnixNano -}}  {{/* 生成唯一 ID */}}
{{- $attrs := printf `id="%s" style="width: %v; height: %v;"` $id $width $height -}}
<div class="echarts" {{ $attrs | safeHTMLAttr }}></div>
<script>
  window.addEventListener("load", function () {
    var myChart = echarts.init(document.getElementById('{{ $id }}'));
    {{ .Inner | safeJS }}
  });
</script>
{{- /* EOF */ -}}