Histórico da Página

<style>
  /* Início estilo banner */

  .compositiondani-banner {
    position: relative;
    min-height: 320px;
    border-radius: 5px;
    margin-bottom: 5px;
    overflow: hidden;
  }

  .compositiondani-banner-image {
    background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/bannert.png");
    background-size: cover;
    min-height: inherit;
    width: 100%;
  }

  .compositiondani-banner-overlay {
    min-height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    pointer-events: none;
  }

  .compositiondani-banner-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .compositiondani-banner-logo {
    width: 400px;
    height: 150px;
    background-image: url("https://totvscrm.com/wp-content/uploads/2023/08/logos.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .compositiondani-banner-title {
    margin-bottom: 10px !important;
    padding: 10px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    max-height: 133px !important;
    font-family: "Roboto", sans-serif !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #ffffff !important;
    position: relative !important;
    margin-top: 190px !important;
    border-radius: 10px !important;
  }

  .compositiondani-banner-content {
    position: absolute;
    padding: 30px;
    max-width: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: white;
    text-align: center;
  }

  .custom-header h1 {
    font-size: 17px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 5px;
    margin: 0;
  }

  .negrito-materialize {
    font-weight: bold;
  }

  .custom-margin-justified {
    margin: 0 20px;
    text-align: justify;
  }
    /* Final estilo banner */

</style>

<header>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet"/>

  <div class="compositiondani-banner">
    <div class="compositiondani-banner-image"></div>
    <div class="compositiondani-banner-overlay"></div>
    <div class="compositiondani-banner-logo-container">
      <div class="compositiondani-banner-logo"></div>
    </div>
    <div class="compositiondani-banner-content">
      <h1 class="compositiondani-banner-title">OTIMIZAÇÃO DE DOWNLOAD DO ESPELHO DE PEDIDO</h1>
    </div>
  </div>
</header>

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Inclua o estilo do tema Monokai -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai.min.css"/>
  

  <style>
  
/* ==============================
    =       CONFIGURAÇÕES GERAIS      =
    =============================== */

* {
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

a {
  color: #42526e;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:hover {
  color: white;
}

li {  font-size: 13px !important;
}

h3 {  font-size: 13px !important;
  font-weight: bold;  

}

h2 {  font-size: 15px !important;
  font-weight: bold;  

}

/* ==============================
      =        ESTILOS DE TÍTULOS       =
      =============================== */

#title-text {
  display: none !important;
}

.wiki-content h1,
.wiki-content h2 {
  font-family: "Roboto", sans-serif !important;
 
}

.wiki-content h1 {
  font-size: 18px16px !important;
}

.wiki-content h2 {
  font-size: 19px14px !important;
  color: #42526e !important;
  border-bottom: 2px solid #dfe1e5;
   padding-bottom: 5px;
  font-weight: bold;  
}

.custom-heading,
h3.custom-h3 {
  font-size: 17px16px;
  color: #42526e;
  margin-bottom: 20px;
}

.custom-h1 {
  color: #feac0e;
}

.explanation h2 {
  font-weight: bold;
}

/* ==============================
      =        ESTILOS DE TEXTO         =
      =============================== */

.wiki-content p {
  font-size: 16px14px !important;
}

.justificado,
.custom-justified {
  text-align: justify;
  margin: 10px 0;
}

/* ==============================
      =       ESTILOS DE LINKS         =
      =============================== */

.wiki-content a,
.wiki-content a:link,
.wiki-content a:visited,
.wiki-content a:focus,
.wiki-content a:active {
  text-decoration: none;
  color: #42526e;
  font-size: 14px;


}

.wiki-content a:hover {
  color: white;
}

/* ==============================
      =       ESTILOS DE CONTAINER     =
      =============================== */

.container2 {
  display: flex;
  gap: 20px;
  padding: 10px;
}

.custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* ==============================
      =       ESTILOS DE CARDS         =
      =============================== */

.card {
  border: 2px solid #9aa1ad;
  padding: 20px;
  flex-grow: 1;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #f4f5f7;
  color: #42526e;
  overflow-x: hidden;
}

.card:first-child {
  flex: 4;
}

.card:last-child {
  flex: 6;
}

/* ==============================
      =       ESTILOS DE TABS          =
      =============================== */

.tabs {
  background-color: #dfe1e5;
}

.tabs .tab a {
  color: rgb(66, 82, 110);
}

.tabs .tab a:hover,
.tabs .tab a.active,
.tabs .tab a:focus.active {
  color: #1094b8;
  background-color: transparent;
}

.tabs .tab a:focus {
  background-color: rgba(82, 200, 232, 0.25);
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  color: rgba(16, 148, 184, 0.24);
}

.tabs .indicator {
  background-color: #1094b8;
}

.tab-content {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 0;
  padding: 10px;
}

.tab-content pre {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==============================
      =        ESTILOS DE ÍCONES        =
      =============================== */

.icon-list,
.icon {
  padding-left: 0;
  list-style-type: none;
}

.icon {
  display: inline-block;
  width: 24px;
  vertical-align: middle;
  margin-right: 45px;
  position: relative;
  left: -25px;
}

.item .label i {
  margin-right: 10px;
}

/* ==============================
      =    ESTILOS DE COMPONENTES      =
      =============================== */

.collapsible,
.collapsible-header,
.collapsible-body {
  box-shadow: none !important;
}

.faq-question {
  font-weight: bold;
  margin-bottom: 5px;
}

.faq-answer {
  margin-bottom: 20px;
}

.custom-list {
  padding-left: 0;
  margin-left: 1.5em;
}

.custom-list li {
  position: relative;
  padding-left: 1em;
}

ul.custom-list {
  padding-left: 10px;
}

ul.custom-list li {
  position: relative;
  list-style-type: disc;
  padding-left: 30px;
  margin-bottom: 10px;
}

.item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.item:last-child {
  border-bottom: none;
}

.item .label {
  flex: 1;
  font-weight: bold;
}

.item .value {
  flex: 1;
  text-align: right;
}
.item {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item:last-child {
  border-bottom: none;
}

/* Estilos para o label */
.label {
  font-weight: bold;
  display: flex;
  align-items: center;
}

.item .label i {
  margin-right: 10px; /* Adiciona espaço depois dos ícones */
}

/* ==============================
      =     ESTILOS DE IMAGENS         =
      =============================== */

.imagem-responsiva {
  max-width: 100%;
  height: auto;
}

.custom-header-bg img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==============================
      =     ESTILOS DE VÍDEO           =
      =============================== */

#youtube-video-container iframe {
  width: 100%;
  height: auto;
  display: block;
}

.video-container {
    max-width: 800px;
    margin: 0 auto;
  }

.ytp-cued-thumbnail-overlay-image {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* ==============================
      =    OUTROS ESTILOS PERSONALIZADOS =
      =============================== */
.custom-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin: 0 10px;
  max-width: 100%;
  overflow: hidden;
}

.custom-heading {
  font-size: 19px16px;
  color: #42526e;
  margin: 10px 0;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 5px;
  font-weight: bold;  
}

#indice {
  border-radius: 5px;
  padding: 20px;
  max-width: 100%;
  overflow: hidden;
}

#indice h2 {
  text-align: center;
  margin-bottom: 20px16px;
}

#indice ul {
  list-style-type: none;
  padding-left: 0;
}

#indice li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

#indice li:last-child {
  border-bottom: none;
}

#indice li:hover {
  background-color: #1094b8;
  color: white;
}

/* ==============================
  =      ESTILOS DE TABELAS        =
  ============================== */
.custom-grey {
  background-color: #ffffff;
}

.custom-grey th,
.custom-grey td {
  border: 1px solid #d7d8da#42526e;
  padding: 10px;
}

.custom-grey th {
  color: #fff;
  background-color: #42526e;
}

.custom-grey tr:nth-child(odd) {
  background-color: #e4e4e6;
}

.custom-grey tr:nth-child(even) {
  background-color: #dfdfdf;
}

/* ========== FIM DO ESTILO ========= */

   < </style>
  

   
<div class="container2">
  <!-- Primeiro Card -->
  <div class="card">
    <div class="item">
      <span class="label">
            <i class="fas fa-tags"></i>    
        <div>Produto:</div>
      </span>
      <div>Automação da Força de Vendas</div>
    </div>
    <div class="item">
      <span class="label">
            <i class="fas fa-link"></i>    
        <div>Linha de Produto:</div>
      </span>
      <div>TOTVS CRM</div>
    </div>
    <div class="item">
      <span class="label">
            <i class="fas fa-chart-pie"></i>    
        <div>Segmento:</div>
      </span>
      <div>Cross Segmentos</div>
    </div>
    <div class="item">
      <span class="label">
            <i class="fas fa-desktop"></i>    
        <div>Módulo:</div>
      </span>
      <div>Relatório</div>
    </div>
    <div class="item">
      <span class="label">
            <i class="fas fa-globe"></i>    
        <div>Aplicação:</div>
      </span>
      <div>Web/app móvel</div>
    </div>
    <div class="item">
      <span class="label">
            <i class="fas fa-hashtag"></i>    
        <div>Identificador:</div>
      </span>
      <div>15266396</div>
    </div>
  </div>

  <!-- Segundo Card -->
  <div class="card">
    <div class="explanation">
      <h2 class="custom-heading"><i class="fa-solid fa-eye"></i>&nbsp &nbsp VISÃO GERAL</h2>  
      <p class="justificado">
        A nova funcionalidade do TOTVS CRM - SFA aprimora o processo de geração de relatórios. Anteriormente, ao clicar em "Relatório", era exigida uma escolha manual de formato. Agora, os usuários podem predefinir um formato (PDF ou XLSX) nas configurações. Assim, ao acionar o botão, o download é iniciado automaticamente no formato selecionado, tornando o fluxo mais ágil.</div>
    <div class="explanation">
      <h2 class="custom-heading"><i class="fa-solid fa-rocket"></i>&nbsp &nbsp OBJETIVO</h2>
      <p class="justificado">
       Aprimorar a experiência na solução, acelerando o download de relatórios no formato escolhido, diminuindo etapas e evitando erros manuais.
      </p>
    </div>
  </div>
</div>
<div class="container2">
  <!-- ... (seu conteúdo existente) ... -->

  <!-- Tabs e conteúdo das guias -->
  <div class="card">
    <ul class="tabs">
      <li class="tab col s4"><a href="#tab1">DETALHES FUNCIONAIS</a></li>
      <li class="tab col s4"><a href="#tab2">DETALHES TÉCNICOS</a></li>
      <li class="tab col s4"><a href="#tab3">FAQ</a></li>
    </ul>
     <!-- Tab Content -->
 
      <div id="tab1" class="col s12">
        <div class="tab-content">
          <div style="background-color: #f5f5f5; padding: 20px; margin-left: 10px; margin-right: 10px;">
            <section id="section1" style="margin-top: 40px;">
               <!-- Tab 70 conteúdo -->
               <h2 class="custom-heading">
                <i class="fa-solid fa-book"></i> &nbsp ANTES DE COMEÇAR
            </h2>
            <h3>Requisitos</h3>
            <p>Para utilizar o recurso, certifique-se de estar usando a versão padrão da solução.</p>
          </section>

          <section id="section2" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-star"></i>&nbsp DETALHES FUNCIONAIS</h2>
            <h3>Funções </h3>

            <ul class="browser-default">
              <li>
                  <p>
                      <b>Anteriormente</b>, para obter o relatório do pedido no TOTVS SFA ambiente web, era necessário:
                  </p>
                  <ul class="browser-default">
                      <li>Clicar no botão <b>"Relatório"</b>.</li>
                      <li>Selecionar o formato desejado (<b>PDF</b> ou <b>XLSX</b>) em uma nova aba.</li>
                  </ul>
              </li>
              <li>
                  <p><b>Com a melhoria</b>, será inserido um parâmetro nas configurações:</p>
                  <ul class="browser-default">
                      <li><b>Determinar previamente</b> o formato de arquivo.</li>
                      <li><b>Permitir download automático</b> ao clicar no botão <b>"Relatório"</b>.</li>
                  </ul>
              </li>
          </ul>
          
          

          </section>
         
      
          <section id="section3" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-shoe-prints"></i>&nbsp COMO USAR?</h2>
            <h3> Passo a Passo</h3>
           
                <ol>
              <li<b>relatório</b>.</li>
              <li>Vá para a pasta de <b>pedidos</b>.</li>
              <li>No card <b>espelho do pedido</b>, clique no ícone <b>lápis de editar</b>.</li>
              <li>Na seção "<b>Downloand sem filtros:</b>", selecione uma das opções <b>"Formato PDF"</b> ou <b>"XLSX"</b>.</li>
              <li>Depois de salvo, ao acessar o pedido e clicar em <b>relatório</b>, automaticamente ele fará o <b>download</b>.</li>
          </ol>
            
            <br>

        <img src="https://totvscrm.com/wp-content/uploads/2023/08/GIF0018.gif" alt="" class="imagem-responsiva">

         
          </section>

          <section id="section4" style="margin-top: 40px;">
            <h2 class="custom-heading"><i class="fa-solid fa-signs-post"></i> &nbspEXEMPLO PRÁTICO</h2>
            <h3>Caso de uso</h3>
           
            <p>
              <b>Cenário</b>: João é representante de vendas. Sua ferramenta principal é o TOTVS CRM - SFA, onde ela acompanha os
              pedidos de seus clientes.
            </p>
<br>
            <p>
              <b>Desafio Antigo</b>: Diariamente, ao necessitar de relatórios de
              pedidos para compartilhar, João enfrentava um processo
              trabalhoso: primeiro, clicava no botão <b>Relatório</b>, aguardava uma
              nova aba abrir, e depois selecionava o formato desejado para finalmente
              realizar o download. Eram necessários ao menos 3 cliques e uma espera.
            </p>
            <br>

            <p>
              <b>Solução Atualizada</b>: Agora, após configurar sua preferência de
              formato no TOTVS CRM - SFA, João precisa apenas clicar no botão
              <b>Relatório</b>. A solução, imediatamente, faz o download no formato
              que ele escolheu anteriormente.
            </p>
            <br>
            <p>
              <b>Resultado</b>: A nova funcionalidade eliminou etapas desnecessárias, permitindo
              que João acesse os relatórios que precisa com mais agilidade, otimizando seu
              tempo e eficiência.
            </p>
                        
          </section>
      
         
          </div>
          <!-- Tab 70 conteúdo -->
          <div style="background-color: #dfe1e5; padding: 20px">
              <!-- Tab 30 conteúdo -->
            <div id="indice">
              <h2><i class="fa-solid fa-address-book"></i> NESTE ARTIGO</h2>
              <ul>
                  <li data-target="section1">ANTES DE COMEÇAR</li>
                  <li data-target="section2">DETALHES FUNCIONAIS</li>
                  <li data-target="section3">COMO USAR?</li>
                  <li data-target="section4">EXEMPLO PRÁTICO</li>
              </ul>
<br>


          </div>
          <div id="indice">
               
            <h2><i class="fa-solid fa-link"></i> LINKS ÚTEIS</h2>
            <ul>
                <li><a href="https://produtos.totvs.com/produto/totvs-crm/automacao-da-forca-de-vendas/" class="link-item">PORTAL DE PRODUTOS</a></li>
                <li><a href="https://informa.totvs.com/" class="link-item">TOTVS INFORMA</a></li>
                <li><a href="https://centraldeatendimento.totvs.com/hc/pt-br/community/topics" class="link-item">CENTRAL COLABORATIVA</a></li>
            </ul>
        </div>
          
            <!-- Tab 30 fim -->
          
            <!-- Tab 30 fim -->
          
          </div>
        </div>
      </div>


      <div id="tab2" class="col s12">
        <div class="tab-content">
          <div style="background-color: #f5f5f5; padding: 40px; margin-left: 10px; margin-right: 10px;">
            <section id="section5" style="margin-top: 40px;">
            <!-- Primeira coluna do conteúdo da guia 2 -->
            <h2 class="custom-heading"><i class="fa-solid fa-gear"></i>&nbsp ESCOPO TÉCNICO</h2>
            
            <h3>Adicionando o Novo Campo</h3>
            <p>Localize-se dentro da tela "Relatório" → "Relatório" → "opção Editar relatório". Aqui, você deverá adicionar um novo campo:</p>
            <ul class="browser-default">
                <li><b>Label:</b> "Download sem filtros:"</li>
                <li><b>Tipo:</b> Combobox</li>
                <li><b>Obrigatório:</b> Sim</li>
                <li><b>Persistência:</b> tabela <code>RELATORIOBI</code>, campo <code>sglformatosemfiltro</code></li>
                <li><b>Adaptações:</b> Crie um campo do tipo <code>varchar(80)</code> NULLABLE na opção 7 do tools.</li>
            </ul>
            
            <p><b>Obs:</b> adicionar esse novo campo em toda tela de edição dos relatórios que não possuem filtro.</p>
        
            <h3>Configurando Opções do Combobox</h3>
            <p>O combobox terá 3 opções, cada uma correspondendo a um comportamento específico:</p><br>
            <ol>
                <li><b>Padrão (selecionar formato):</b> Valor a ser persistido: <code>PADRAO</code></li>
                <li><b>Formato PDF:</b> Valor a ser persistido: <code>PDF</code></li>
                <li><b>Formato XLSX:</b> Valor a ser persistido: <code>XLSX</code></li>
            </ol>
        
            <h3>Determinando Comportamentos de Download</h3>
            <p>Ao acionar o botão "Relatório", o sistema deve verificar o valor selecionado no combobox e agir de acordo:</p>
            <ol>
                <li><b>Padrão (selecionar formato):</b> O SFA mantém o modelo atual.</li>
                <li><b>Formato PDF:</b> O SFA inicia o download automático no formato PDF.</li>
                <li><b>Formato XLSX:</b> O SFA inicia o download automático no formato XLSX.</li>
            </ol>
        
            <h3>Instrução de Verificação</h3>
            <p>Para confirmar a configuração, realize a seguinte busca:</p>


                  <pre><code class="language-sql"> SELECT
                    sglformatosemfiltro
                FROM
                    relatoriobi
                WHERE
                    nome = 'Espelho do Pedido.prpt';</code></pre>
            <br>

           
              </div>
              <div style="background-color: #dfe1e5; padding: 20px">
                <!-- Tab 30 conteúdo -->
                <div id="indice">
               
                  <h2><i class="fa-solid fa-link"></i> LINKS ÚTEIS</h2>
                  <ul>
                      <li><a href="https://produtos.totvs.com/produto/totvs-crm/automacao-da-forca-de-vendas/" class="link-item">PORTAL DE PRODUTOS</a></li>
                      <li><a href="https://informa.totvs.com/" class="link-item">TOTVS INFORMA</a></li>
                      <li><a href="https://centraldeatendimento.totvs.com/hc/pt-br/community/topics" class="link-item">CENTRAL COLABORATIVA</a></li>
                  </ul>
              </div>




              
            </div>
            


           
        </div>
    </div>

    <div id="tab3" class="col s12">
      <div class="tab-content">
        <div style="background-color: #f5f5f5; padding: 20px">
              <!-- Primeira coluna do conteúdo da guia 2 -->
              <div class="container">
                <h2 class="custom-heading"><i class="fa-solid fa-circle-question"></i> PERGUNTAS FREQUENTES</h2>
                <ul class="collapsible">
                    <li>
                        <div class="collapsible-header"><i class="material-icons">question_answer</i>Posso manter o método antigo de seleção de formato a cada download?</div>
                        <div class="collapsible-body"><span>Sim! Basta selecionar a opção "Padrão (selecionar formato)" no combobox. Assim, sempre que clicar em "Relatório", será solicitado que escolha o formato desejado.
                          </span></div>
                    </li>
                   
                    <!-- Adicione mais perguntas e respostas aqui conforme necessário -->
                </ul>
            </div>

            
                            <!-- Primeira coluna do conteúdo da guia 2 -->

            
            </div>
              <div style="background-color: #dfe1e5; padding: 20px">
                <!-- Tab 30 conteúdo -->
              <div id="indice">
                <h2><i class="fa-solid fa-link"></i> LINKS ÚTEIS</h2>
                <ul>
                    <li><a href="#" class="link-item">PORTAL DE PRODUTOS</a></li>
                    <li><a href="#" class="link-item">TOTVS INFORMA</a></li>
                    <li><a href="#" class="link-item">CENTRAL COLABORATIVA</a></li>
                </ul>
            </div>
          </div>
      </div>
  </div>

    
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  // Inicialização das tabs
  document.addEventListener("DOMContentLoaded", function () {
    var tabs = document.querySelectorAll(".tabs");
    M.Tabs.init(tabs);
  });
</script>

<script>
  const items = document.querySelectorAll("#indice li");

  items.forEach(item => {
      item.addEventListener('click', (e) => {
          const targetId = e.target.getAttribute('data-target');
          const targetElement = document.getElementById(targetId);
          window.scrollTo({
              top: targetElement.offsetTop - 10,
              behavior: "smooth"
          });
      });
  });
</script>

<script src="https://kit.fontawesome.com/c97d4c197a.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 


<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script> 

<script>hljs.highlightAll();</script>
  


<script src="scripts.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.collapsible');
      var instances = M.Collapsible.init(elems);
  });
</script>

 <!-- ... (conteudo video) ... -->