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>