Abarone.it Logo

Evidenziare il codice nella pagina web

Inserire codice html, php, java, c, c++, c# , python ecc..

In questo breve articolo, vediamo come fare per inserire dei pezzetti di codice 'formattati con colori originali' all'interno delle nostre pagine web.
Per farlo, basandomi come base su un sito web , costruito con Django e utilizzando linguaggio Markdown, utilizzo un modulo di django: django-pygments, plugin implementato su base di pygments.
In cosa consiste vi starete chiedendo? Semplice, pygments permette di formattare del codice, come se fossimo all'interno di un software di programmazione, quindi evidenziandomi colori, metodi ecc.
Pygments supporta oltre 300 linguaggi, per la lista dei linguaggi supportati cliccare qui.

Per procedere basta seguire questi semplici passi:
1. Installo i pacchetti:

  1. pip install pygments
  2. pip install django-pygments

2. Inserisco il pacchetto installato nelle app di django ( file settings.py):

  1. import os
  2. INSTALLED_APPS = (
  3. . . . .
  4. . . . .
  5. 'django_pygments',
  6. )

3. Mi sposto tramite terminale nella cartella dove sono presenti i miei file css:

  1. pygmentize -S vs -f html > vs.css

4. Inserisco i tag all'interno del template base del mio progetto Django:

  1. {% load pygmentify %}
  2. {% pygment %}
  3. {% endpygment %} (alla fine del blocco)

5. Inserisco il seguente tag , sostituendo il linguaggio in base al linguaggio che dovrò formattare:

  1. <pre lang="c"> <!-- inserire qui il codice --></ pre>

Esempio:

  1. #include<stdio.h>
  2. int main()
  3. {
  4. printf("Hello World");
  5. return 0;
  6. }

Per aggiungere ulteriori temi, cliccare qui, quindi copiare i temi nella cartella insieme agli altri css e aggiungere prima di ogni riga il termine .highlight
Per avere un'idea di quello che saranno i temi una volta applicati cliccare qui.

barone.antonio@libero.it