Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

keven1406

Mostrar código na página

Por , em Desenvolvimento frontend

Recommended Posts

keven1406    2

keven1406
Postado
Como mostrar um código javaScript na página de forma correta? Quero fazer um artigo em HTML5 e nele exemplificar um código aleatório que não faz parte do código da página. No entanto, se eu digitar o código e depois tentar identar ele com HTML5, não consigo ter um bom resultado. O <br> não funciona e o código fica parecendo apenas em uma unica linha. <p> também não funciona. Tem alguma forma de digitar o código sem que a página o considere um código?
Um exemplo: 
<!DOCTYPE html>
<html lang = "pt-br">
    <head>
        <title>Inserir código</title>
        <meta charset = "UTF-8">
        <style>
            p {
                color: white;
            }
            #caixa-codigo {
                width:300px;
                height: 300px;
                background-color: aqua;
                margin-left: auto;
                margin-bottom: auto;
            }
        </style>
    </head>
    <script>
        
    </script>
    <body>
        <h1>Inserir o código de exemplo a baixo:</h1>
                <p>
                	for (var i = 2; i< 10; i++) <br/>
                	console.log("i") <br/>
                </p>
    </body>
</html>

 

Outra pergunta: Qual melhor plugin Wordpress para fazer esse tipo de coisa? Já pesquisei bastante sobre isso e as pessoas falam nomes de plugins, mas quando procuro lá no Wordpress o plugin, fica como não encontrado.

Estava com duvida se era pra colocar essa pergunta no fórum de JavaScript, WordPress ou nesse aqui, me desculpem se coloquei no lugar errado.
Desde já, obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Iskandar    5

Iskandar
Postado

Adiciona a linha "white-space: pre" no css do elemento onde o código vai ficar. Se quiser que mostre coloridinho e tal, tem que pesquisar algum plugin relacionado a highlight code, algo assim.

Compartilhar este post

Link para o post
Compartilhar em outros sites

marsolim    110

marsolim
Postado

se usar a tag pre também vai 

<pre>
    conteúdo
</pre>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

keven1406    2

keven1406
Postado

Pessoal, primeiramente muito obrigado por responderem a minha pergunta. Desde já peço desculpas por ter postado um código meio desconexo na primeira pergunta. Mas estou com outra duvida a respeito da tag que vocês falaram. Notei que quando coloco o código dentro dessa tag, ele aparece na página, no entanto fica com uma formatação feia. E a posição que ele fica é de acordo com a posição do editor de texto. Pesquisei sobre a tag <pre> e descobrei que se refere a texto pre definido. Por isso aparece esse texto sem formatação. também utilizeu a forma que o @Iskandar falou, mas continuou a mesma coisa do exemplo que vou postar abaixo.Tentei editar ele com css e deu nisso: 

<!DOCTYPE html>
<html lang = "pt-br">
    <head>
        <title>Inserir código</title>
        <meta charset = "UTF-8">
        <style>
            #caixa-codigo {
            	position: relative;
                width:300px;
                height: 300px;
            	margin-left: 100px;
                background-color: #666;
            }
            #caixa-codigo pre {
            	position: absolute;
            	top: 0px;
            	left:-170px;        	
            	color: white;
            }
        </style>
    </head>
    <body>
        <h1>Inserir o código de exemplo a baixo:</h1>
	        <div id = "caixa-codigo">
		        <pre>
			    	for (var i = 2; i< 10; i++)
			    		console.log("i")
		        </pre>
	        </div>
    </body>
</html>

Foi a única forma que consegui colocar ele bonitinho dentro da caixa cinza. Isso está certo ou estou fazendo de forma errada? tem alguma forma melhor de formata-lo? Qual a diferença dessa tag para a tag <code>. Já que as duas tem o mesmo resultado, seria melhor utilizar o <code>, já que se refere a códigos? Obrigado pessoal!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Rafael_Ferreira
      Não consigo carregar imagem do captcha no meu formulário
      Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • luiz monteiro
      Evitar que o navegador limpe os campos de input quando a guia perde o foco
      Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • belann
      Navbar no Nextjs
      Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
    • ILR master
      Fixar div até atingir uma certa altura
      Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito