How to show other codes within HTML?

Asked

Viewed 87 times

0

I would like to present on a WEB page that shows other codes, for example the language documentation pages, they show code snippets...

I have the idea to show you some code snippets in the same style, but without putting the IDE image or without having to tag <p>

Is there a tag that shows codes from other languages on the page? Is there any styling to do this with CSS?

html css ux

1 answer

2


Is there a tag that shows codes of other languages on the page?

Yes, the HTML element <code> presents its stylized content to indicate that the text is a small fragment of code. To represent multiple lines of code, surround the element <code> within the element <pre>. The element <code> alone represents only a single sentence or line of code.

There is some styling to do this with CSS?

Not native, either manually write the style page to highlight syntax (syntax Highlighting) or use a specialized library. In this case the example was written with 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>

Browser other questions tagged html css ux

You are not signed in. Login or sign up in order to post.