Integrate Prismjs with Hugo

1

I would like to integrate prism.js with my hugo website able to copy and paste clipboard for code blocks.Without prism I do no have any highlight issue as you can see below.

image
image1009×135 4.09 KB

But when I enable prism, ı can able to copy clipboard but have some issue for highlight as below image.Seems css not working properly even if ı do not have any error. Any help appreciated.

image
image982×79 1.67 KB

This is how i included.

<!DOCTYPE html>
<html>
<head>
    <link href="https://{{cdn}}/prism@v1.x/themes/prism.css" rel="stylesheet" />
</head>
<body>
    <script src="/config/js/prism.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-core.min.js">. 
    </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>

config.toml

# Highlighting config
pygmentsCodeFences = true
pygmentsUseClasses = false
pygmentsStyle = "tango"

[params]
prism_syntax_highlighting = true

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
  [markup.highlight]
      # See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html
      style = "emacs"