chatGPT usa abbondantemente il Markdown

GPT
1

Però bisogna spesso convertirlo in HTML, ovviamente mi sono fatto spiegare tutto dal fedele braccio destro, GPT!
Nello Head bisogna aggiungere:
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
E si usa così ad esempio:

HTML:
    <div id="threadContentContainer" class="thread-content-container">
JS:
    // Creazione del contenuto del thread
    var threadContent = document.createElement('div');
    threadContent.className = 'thread-content';
    var markdownContent = document.createElement('div');
     // Converte il messaggio Markdown in HTML
    var htmlContent = marked.parse(testo_markdown);
    // Imposta il contenuto HTML convertito nel div
    markdownContent.innerHTML = htmlContent;
    // Aggiungi il contenitore con il contenuto Markdown al DOM
    threadContent.appendChild(markdownContent);

Esempio, dopo la conversione:
Assistente 14:33:30

Ecco i dettagli della fattura per “Pizzeria il Talento”:

  • Numero Fattura: 5
  • Data: 2024-08-24
  • Cliente: Pizzeria il Talento
  • Modalità di Pagamento: Bonifico
  • Totale Fattura: 106 €

Dettagli dei Prodotti:

  1. Prodotto: Funghi porcini
  • Quantità: 2
  • Prezzo Unitario: 18.00 €
  • Imponibile: 36.00 €
  1. Prodotto: Insalata russa
  • Quantità: 3
  • Prezzo Unitario: 22.00 €
  • Imponibile: 66.00 €

Vuoi fare altre modifiche o aggiungere altri prodotti?

E infine gli stili da utilizzare, per chatGPT sono sempre questi:
.markdown-content {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}

    .markdown-content h1,
    .markdown-content h2,
    .markdown-content h3,
    .markdown-content h4,
    .markdown-content h5,
    .markdown-content h6 {
        font-weight: bold;
        margin-top: 1em;
        margin-bottom: 0.5em;
    }



    .markdown-content ul,
    .markdown-content ol {
        margin: 1em 0;
        padding-left: 1.5em;
    }

    .markdown-content li {
        margin-bottom: 0.5em;
    }

    .markdown-content code {
        font-family: monospace;
        background-color: #f4f4f4;
        padding: 0.2em 0.4em;
        border-radius: 3px;
    }

    .markdown-content pre {
        background-color: #f4f4f4;
        padding: 1em;
        overflow-x: auto;
        border-radius: 5px;
    }

    .markdown-content blockquote {
        border-left: 4px solid #ddd;
        padding: 0.5em 1em;
        color: #555;
        background-color: #f9f9f9;
        margin: 1em 0;
    }

    .markdown-content a {
        color: #0366d6;
        text-decoration: none;
    }

    .markdown-content a:hover {
        text-decoration: underline;
    }
2 Mi Piace