0
123
VistasCambio de fuente extraño al agregar resaltados al sitio web de Hugo usando la purga y el tema Anatole
Estoy tratando de agregar resaltado.js a mi sitio web de Hugo con el tema Anatole.
Así es como se ve un fragmento de código antes de agregar resaltados:
Y así es como se ve después de agregar Highlight.js:
Por supuesto, esta no es la forma en que debería verse.
Para agregar resaltado.js, agregué el siguiente código a layouts/partials/head.html :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/r.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/python.min.js"> </script> Y agregué el siguiente código a layouts/partials/article_footer_js.html :
<script>hljs.initHighlightingOnLoad();</script>¿Qué estoy haciendo mal?
1 Respuestas
Responde la pregunta0
Entonces, no soy muy bueno en css pero encontré una solución. Mi solución fue agregar un archivo assets/scss/partials/components/_code.scss con el siguiente contenido:
pre code.hljs, code.hljs, .hljs, .hljs-comment, .hljs-tag, .hljs-punctuation, .hljs-tag .hljs-name, .hljs-tag .hljs-attr, .hljs-keyword, .hljs-attribute, .hljs-selector-tag, .hljs-meta .hljs-keyword, .hljs-doctag, .hljs-name, .hljs-type, .hljs-string, .hljs-number, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion, .hljs-title, .hljs-section, .hljs-regexp, .hljs-symbol, .hljs-variable, .hljs-template-variable, .hljs-link, .hljs-selector-attr, .hljs-operator, .hljs-selector-pseudo, .hljs-literal, .hljs-built_in, .hljs-bullet, .hljs-code, .hljs-addition, .hljs-meta, .hljs-meta .hljs-string, .hljs-emphasis, .hljs-strong { font-family: monospace, monospace; } Y luego agregar la siguiente línea al final de assets/scss/main.scss :
@import './partials/components/code';Con estos cambios, la familia de fuentes del código resaltado volvió a monoespaciado y el tamaño de fuente es el mismo para todo el código.