+ Rispondi al Thread
Visualizzazione dei risultati da 1 a 10 su 10

Discussione: Riproduzione di codice HTML in una pagina WEB

  1. #1
    L'avatar di Gandalfrank
    Gandalfrank non è in linea Scribacchino
    Luogo
    Pisa
    Post
    1,219

    Riproduzione di codice HTML in una pagina WEB

    Ho un mio sito personale nel quale ogni tanto aggiungo qualche nuovo articolo. Ultimamente ho avuto la necessità di scrivere qualche appunto sull'uso di HTML.
    Per rendere più leggibile il codice esposto, ho pensato di utilizzare la stessa formattazione usata dall'editor che utilizzo di solito per scrivere pagine web, MANTENENDO intatti non solo la sintassi e l'indentazione, ma anche i COLORI delle singole istruzioni.

    ESEMPIO

    Il risultato mi soddisfa esteticamente, ma la sua realizzazione è a dir poco NOIOSA, perché ho dovuto cambiare il colore di OGNI singola istruzione a mano, selezionando una alla volta ogni parola che doveva essere colorata diversamente dalle altre. Inoltre, nonostante il codice riportato fosse relativamente breve, ho comunque commesso diversi errori di stile.

    DOMANDA:

    Esiste un modo più pratico per risolvere la cosa? Magari con uno script o un'applicazione?

  2. #2
    L'avatar di Brontolo
    Brontolo non è in linea Very Important Person
    Post
    3,029
    Potresti ritagliare l'immagine del codice nell'editor ed inserirla nella pagina hrml come immagine.
    Il regolamento del forum: la prima cosa da leggere.

  3. #3
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Luogo
    Reggio Emilia
    Post
    1,316
    Quote Originariamente inviato da Gandalfrank Visualizza il messaggio
    Esiste un modo più pratico per risolvere la cosa? Magari con uno script o un'applicazione?
    Dovresti formattare il tutto usando un editor qualsiasi di testo e poi, supponendo di esportare in HTML, sottoporre il codice a un "encoder" in modo da generare l'equivalente per riprodurre il codice HTML in quanto tale, e non la sua rappresentazione nel browser.

    Online puoi trovare tantissimi encoder, tipo questo.

    L'alternativa è quella di integrare un plugin JavaScript o altro che sia in grado di interpretare diversi sintassi di diversi linguaggi, tra cui l'HTML, in modo da rappresentarlo così com'è nella pagina.

    Ciao!
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Homepage | Blog | Delphi Podcast | Altri link...

  4. #4
    L'avatar di Gandalfrank
    Gandalfrank non è in linea Scribacchino
    Luogo
    Pisa
    Post
    1,219
    Grazie per le risposte.

    Non faccio lo screenshot del codice per consentire a chi lo desidera, di fare copia/incolla e poi è un occasione per imparare qualcosa di diverso.

    L'encoding del codice HTML non è un problema... sono sufficienti pochi "Trova e Sostituisci" e in un paio di minuti ho il codice adatto alla rappresentazione in una pagina HTML.

    Il problema è la riproduzione dei colori.

    se ho questo:
    codice:
    <head>
        <title>Centrare orizzontalmente un contenitore</title>
        <style>
          .Contenitore{
            text-align: center;
            border: 2px solid yellowgreen;
          }
        </style>
      </head>
    e voglio che:
    head, title, style e la punteggiatura siano di colore nero
    il testo "Centrare orizzontalmente un contenitore" sia di colore blu
    il nome della classe .Contenitore sia di colore rosso
    le proprietà text-align e border di colore arancio
    i valori center e 2px solid yellowgreen di colore verde

    devo selezionare OGNI singola parola e cambiarne il colore racchiudendola nel tag span. Oltre ad essere un lavoro piuttosto noioso e lungo è soggetto ad errori.

    Conoscete un metodo più pratico per la sua realizzazione?

  5. #5
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Luogo
    Reggio Emilia
    Post
    1,316
    Quote Originariamente inviato da Gandalfrank Visualizza il messaggio
    Conoscete un metodo più pratico per la sua realizzazione?
    Ribadisco quanto ho già scritto:

    L'alternativa è quella di integrare un plugin JavaScript o altro che sia in grado di interpretare diversi sintassi di diversi linguaggi, tra cui l'HTML, in modo da rappresentarlo così com'è nella pagina.

    Cerca un "Syntax Highlighter" da integrare nel sito.

    In alternativa, copia/incolla il codice da un editor (es. Visual Studio Code) che supporti un plugin con la possibilità di copiare anche la formattazione, quindi stili e colori.

    Ciao!
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Homepage | Blog | Delphi Podcast | Altri link...

  6. #6
    L'avatar di Gandalfrank
    Gandalfrank non è in linea Scribacchino
    Luogo
    Pisa
    Post
    1,219
    Grazie per i consigli. Non sapevo che VS Code fornisse la possibilità di copiare anche la formattazione del testo.

    Non trovando soluzioni avevo iniziato a realizzare un piccolo programma , con php, che mi consentisse di applicare i colori al testo in base al tipo di istruzione, valore o stringa, secondo le mie necessità.
    Buona Pasqua

  7. #7
    L'avatar di Gandalfrank
    Gandalfrank non è in linea Scribacchino
    Luogo
    Pisa
    Post
    1,219
    @_alka_:

    Il tuo suggerimento di usare un editor come VS Code con un plug-in per la copia del testo+formattazione mi ha ricordato che con writer di Libre Office si possono scrivere articoli e poi esportare il file in formato html, il quale mantiene ogni dettaglio impostato nella stesura, colori compresi.

    NON HO installato VS Code, ma avendo Writer, ho provato a vedere se come soluzione mi poteva andare bene.
    Forse VS Code fornisce una qualità migliore, ma Writer, per convertire un testo in HTML produce tanto di quel codice, per pulire il quale e tenere ciò che effettivamente serve, ho impiegato più tempo che a modificare manualmente i colori delle singole parole aggiungendo <span style="color:..."></span>.
    Di fatto, almeno secondo il mio modesto parere, credo sia più proficuo realizzare un parser personalizzato che non tentare di trovare un editor che faccia esattamente quello che mi necessita.

    Di nuovo grazie per i consigli.

  8. #8
    L'avatar di Brontolo
    Brontolo non è in linea Very Important Person
    Post
    3,029
    Non faccio lo screenshot del codice per consentire a chi lo desidera, di fare copia/incolla
    Invece di consentire il copia/incolla potresti mettere un bottone "Download" oppure un bottone "Copia". Molti siti che propongono codice fanno così.
    Il regolamento del forum: la prima cosa da leggere.

  9. #9
    L'avatar di Gandalfrank
    Gandalfrank non è in linea Scribacchino
    Luogo
    Pisa
    Post
    1,219
    Ciao Brontolo. Francamente non avevo pensato a questa soluzione. E' interessante!
    Avevo scartato l'idea delle immagini, non solo perché voglio consentire il copia/incolla, ma anche perché in alcuni casi il codice è piuttosto lungo, e generare uno screenshot del listato da origine a foto troppo grandi.
    Grazie comunque.

  10. #10
    L'avatar di Gandalfrank
    Gandalfrank non è in linea Scribacchino
    Luogo
    Pisa
    Post
    1,219
    Ho risolto creando un PARSER HTML che mi permette di colorare le singole istruzioni come preferisco.
    Se qualcuno fosse interessato può trovare il programma online sul mio sito.

    HTML Color Code

    Qualunque consiglio, critica o suggerimento abbiate sarei lieto di ascoltarlo.

+ Rispondi al Thread

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi