Afegint colors a la sintaxi dels llenguatges de programació en els articles de Drupal

En aquest article t'explique com instal·lar una funcionalitat que transforma l'etiqueta CODE dins dels articles de Drupal per a que el codi dels llenguatges de programació tinguen colors en la sintaxi.

Començarem descarregant el mòdul Highlight Js syntax highlighter.


wget https://ftp.drupal.org/files/projects/highlight_js-1.2.0.tar.gz
tar xvfz highlight_js-1.2.0.tar.gz


Instal·lem el mòdul com sempre a Drupal.
Ara, des del menú Administració + Configuració + Hightlight Js Configuration configurarem els llenguatges on volem que aplique els colors.

I finalment, des de Configuració + Text formats and editors, editem el format HTML complet i activem el checkbox del format Hightlight.js, i ja el tenim activat en el camp body dels articles.

EXEMPLES
Exemple 1: Equilibrium gray dark
Exemple 2: Default dark
Exemple 3: Dracula
Exemple 4: Github
Exemple 5: Apathy
Exemple 6: Bespin
Exemple 7: Gruvbox dark hard
Exemple 8: Harmonic16 dark

Pots provar més classes en la web oficial de Hightlight Js: https://highlightjs.org/demo

APLICANT EL COLOR SEGONS EL LLENGUATGE
Farem servir l'etiqueta <code lang="llenguatge"> per a especificar-li al mòdul Hightlight Js quin llenguatge anem a escriure.

Per exemple, si volem ficar un estil CSS en la pàgina, escriurem:
<pre><code lang="css">el nostre codi CSS ...</code></pre>

I si volem deshabilitar els colors, podem afegir la classe "no-highlight" així:
<code class="no-highlight">el nostre codi...</code></pre>

Ací, a continuació, et deixe uns exemples de colors de la sintaxi de diferents llenguatges.

Exemple de codi CSS:

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 90%;
  padding: 3px 0px 3px 0px;
} 

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

code {
  font-size: 90%;
  word-wrap: break-word;
  background: #353641;
  padding: 3px 0px 3px 0px;
}

Exemple de codi Javascript:

 
#!/usr/bin/env bash
set -u

URLS_FILE="${1:-/root/comprovador_webs_urls.txt}"
TIMEOUT="${TIMEOUT:-20}"
LOGFILE="${LOGFILE:-/var/log/comprovador_webs.log}"

timestamp() { date "+%Y-%m-%d %H:%M:%S"; }

mkdir -p "$(dirname "$LOGFILE")"

classify_curl_error() {
  # https://curl.se/libcurl/c/libcurl-errors.html
  case "$1" in
    28) echo "TIMEOUT" ;;
    6)  echo "DNS_ERROR" ;;
    7)  echo "CONNECT_ERROR" ;;
    35) echo "TLS_HANDSHAKE_ERROR" ;;
    51) echo "CERT_VERIFY_ERROR" ;;
    58) echo "LOCAL_CERT_PROBLEM" ;;
    60)
      # intentem distingir una mica amb el text
      if echo "$2" | grep -qi "expired"; then
        echo "SSL_CERT_EXPIRED"
      elif echo "$2" | grep -qi "issuer is not recognized\|self signed\|unable to get local issuer"; then
        echo "SSL_UNTRUSTED_ISSUER"
      else
        echo "SSL_CERT_INVALID"
      fi
      ;;
    *)  echo "CURL_ERROR_$1" ;;
  esac
}