Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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!se usar a tag pre também vai
<pre>
conteúdo
</pre>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!
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.