CODEWITHSUNDEEP
javascripthtmlcsssyntax-highlighting
Nyle Cohen
Nyle Cohen

Reputation: 17

How to show code like dev websites in HTML?

I would like to find out how to show code in a way like on StackOverflow or other developer websites. When I mean show code I mean it like this.

    Some sample Code

I see it on lots of developer websites and would like to know how to do this.

Upvotes: 0

Views: 1441

Answers (2)

Behrang Saeedzadeh
Behrang Saeedzadeh

Reputation: 47913

Advice: read some tutorials and learn HTML, CSS, and JavaScript.

However here's a fully working example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">

</head>
<body>

  <pre>
    <code class="hljs java">
      public class Main {
        public static void main(String[] args) {

        }
      }
    </code>
  </pre>
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</body>
</html>

Here is how it works. You write computer code inside <code> elements. You wrap <code> elements with <pre> elements to preserve white space, new lines, etc.

Then you should syntax highlight (also known as colorizing) the code. For that you are better off using a 3rd party library. There are numerous libraries that can do that:

Some of these libraries let you choose the color scheme for your code block too. Here's the same code with a different color scheme:

The only line changed to apply the new color scheme is:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css">

Upvotes: 5

snack_overflow
snack_overflow

Reputation: 546

Use the HTML code tag - <code>.

You can edit how is appears in CSS, maybe something like this...

code {
    background-color:#F5F5F5;
}

Upvotes: 2

Related Questions