Mostrar código na página - HTML e CSS - Fórum iMasters
By keven1406, April 25, 2017 in HTML e CSS
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?
<title>Inserir código</title>
#caixa-codigo {
<h1>Inserir o código de exemplo a baixo:</h1>
for (var i = 2; i< 10; i++) <br/>
console.log("i") <br/>
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.
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.
se usar a tag pre também vai
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:
#caixa-codigo pre {
<div id = "caixa-codigo">
for (var i = 2; i< 10; i++)
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!