Javascript Google Code Prettify.js Syntax Highlighter With Line Numbers Example in Browser

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code Highlighting with Proper Line Numbers</title>

  <!-- Prettify.js Syntax Highlighter CDN -->
  <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=desert&lang=php,js" defer></script>

  <!-- Custom CSS for showing line numbers properly -->
  <style>
    pre {
      padding: 10px;
      border: 1px solid #ccc;
      background-color: #f8f8f8;
      font-family: monospace;
      position: relative;
    }

    /* Custom style to force every line to have a number */
    ol.linenums {
      margin-left: 40px !important;
    }

    ol.linenums li {
      list-style-type: decimal;
      margin-left: -55px;
    }
  </style>
</head>
<body>

  <h2>JavaScript Code Example</h2>

  <pre class="prettyprint linenums">
let i = 0;
let j = 2;

function sum(a, b) {
  return a + b;
}
  </pre>

  <h2>PHP Code Example</h2>

  <pre class="prettyprint linenums">
&lt;?php
function greet($name) {
  echo "Hello, " . $name;
}
?&gt;
  </pre>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Code Highlighting with Proper Line Numbers</title>

<style>

pre {

padding: 10px;

border: 1px solid #ccc;

background-color: #f8f8f8;

font-family: monospace;

position: relative;

}

/* Custom style to force every line to have a number */

ol.linenums {

margin-left: 40px !important;

}

ol.linenums li {

list-style-type: decimal;

margin-left: -55px;

}

</style>

</head>

<body>

<h2>JavaScript Code Example</h2>

let i = 0;

let j = 2;

function sum(a, b) {

return a + b;

}

</pre>

<h2>PHP Code Example</h2>

<?php

function greet($name) {

echo "Hello, " . $name;

}

</pre>

</body>

</html>

Javascript Google Code Prettify.js Syntax Highlighter With Line Numbers Example in Browser

Comments

Leave a Reply Cancel reply

Archives