Mostrar código na página

keven1406 · Abril 25, 2017

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!

Iskandar · Abril 28, 2017

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.

marsolim · Abril 28, 2017

se usar a tag pre também vai

<pre>
    conteúdo
</pre>

keven1406 · Abril 30, 2017

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!

Entrar

Arquivado

Mostrar código na página

Recommended Posts

keven1406 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Iskandar 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

marsolim 110

Compartilhar este post

Link para o post

Compartilhar em outros sites

keven1406 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fazer busca no Banco de dados usando vários critério

agregar dados em VBA excel

Sistema não funciona corretamente

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante