Skip to content

Instantly share code, notes, and snippets.

@juan-reynoso

juan-reynoso/syntax-highlighting-for-the-web.html

Last active March 21, 2022 20:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save juan-reynoso/9295554784c1a525c7a4c426d59f8dad to your computer and use it in GitHub Desktop.
Save juan-reynoso/9295554784c1a525c7a4c426d59f8dad to your computer and use it in GitHub Desktop.
Download ZIP
Example: Syntax highlighting for the Web
Raw
syntax-highlighting-for-the-web.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Syntax highlighting for the Web</title>
<!-- highlight-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/rainbow.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/languages/lisp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/languages/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/languages/python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/languages/c.min.js"></script>
</head>
<body class="bg-white">
<h1 class="py-3 text-center text-primary"><i class="bi-globe"></i> Hello, world!</h1>
<h2 class="pb-3 text-center text-success">Syntax highlighting for the Web.</h1>
<div class="container">
<! -- It displays an lisp example -->
<style>
.titlebar {
height:40px;
background-color:#bebebe;
}
</style>
<div class = "mb-5">
<div class="titlebar rounded-top d-flex justify-content-end flex-row align-items-center">
<i class="bi-circle-fill fs-5 text-success"></i>
<i class="bi-circle-fill ms-2 text-warning fs-5"></i>
<i class="bi-circle-fill ms-2 me-2 text-danger fs-5"></i>
</div>
<div class="border border border-ligth">
<pre>
<code class="language-lisp fs-5 bg-white text-dark">
;;; Lisp function
(defun sum (x y)
(+ x y))
</code>
</pre>
</div>
</div>
<div class = "mb-5">
<div class="titlebar rounded-top d-flex justify-content-end flex-row align-items-center">
<i class="bi-circle-fill fs-5 text-success"></i>
<i class="bi-circle-fill ms-2 text-warning fs-5"></i>
<i class="bi-circle-fill ms-2 me-2 text-danger fs-5"></i>
</div>
<div class="border border border-ligth">
<pre>
<code class="language-javascript fs-5 bg-white text-dark">
// Javascript function
function sum(x, y){
return x + y;
}
</code>
</pre>
</div>
</div>
<div class= "row">
<div class= "col-6">
<div class = "mb-5">
<div class="titlebar rounded-top d-flex justify-content-end flex-row align-items-center">
<i class="bi-circle-fill fs-5 text-success"></i>
<i class="bi-circle-fill ms-2 text-warning fs-5"></i>
<i class="bi-circle-fill ms-2 me-2 text-danger fs-5"></i>
</div>
<div class="border border border-ligth">
<pre>
<code class="language-python fs-5 bg-white text-dark">
# Python function
def sum(x, y):
return x + y
</code>
</pre>
</div>
</div>
</div>
<div class= "col-6">
<div class = "mb-5">
<div class="titlebar rounded-top d-flex justify-content-end flex-row align-items-center">
<i class="bi-circle-fill fs-5 text-success"></i>
<i class="bi-circle-fill ms-2 text-warning fs-5"></i>
<i class="bi-circle-fill ms-2 me-2 text-danger fs-5"></i>
</div>
<div class="border border border-ligth">
<pre class ="pb-0">
<code class="language-c fs-5 bg-white text-dark">
/* C function */
int sum (int x, int y){
return x + y;
}</code>
</pre>
</div>
</div>
</div>
</div>
<script>hljs.highlightAll();</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment