0

Eu gostaria de apresentar em uma página WEB que mostrasse outros códigos, por exemplo as páginas das documentações das linguagens, elas mostram trechos de códigos...

Tenho a ideia de mostrar alguns trechos de códigos no mesmo estilo, porém sem colocar a imagem da IDE ou sem precisar colocar a Tag <p>

Existe alguma tag que mostre códigos de outras linguagens na página? Existe alguma estilização para fazer isso com CSS?

0

1 Resposta 1

2

Existe alguma tag que mostre códigos de outras linguagens na página?

Sim, o elemento HTML <code> apresenta seu conteúdo estilizado de maneira a indicar que o texto é um pequeno fragmento de código. Para representar múltiplas linha de código, envolva o elemento <code> dentro do elemento <pre>. O elemento <code> por si só representa somente uma única sentença ou linha de código.

Existe alguma estilização para fazer isso com CSS?

Nativo não, ou escreve manualmente a página de estilo para fazer o realce de sintaxe(syntax highlighting) ou use uma biblioteca especializada. No caso o exemplo foi escrito com highlight.js

hljs.highlightAll();
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/a11y-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script>

<pre><code class="python" contentEditable="true">
import unicodedata

x = input("Diga-me a estação que deseja fazer a compra: \n")

x = unicodedata.normalize('NFKD', x).encode('ascii', 'ignore').decode('utf8')

if x.lower() == "verao":
  print("StreamShop,","R$89,99")    
elif x.lower() == "primavera":
  print("Loajing,", "R$84,00")    
elif x.lower() == "outono":
  print("Showpping,", "R$73,00")    
elif x.lower() == "inverno":
  print("Loajing,", "R$139,00")    
else:
  print("Valor inválido")
</code></pre>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .