Skip to content

Instantly share code, notes, and snippets.

@PrashantUnity

PrashantUnity/Highlight.html

Last active December 15, 2022 10:08
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 PrashantUnity/e6c24ae0e4689635746147b14bcbd3cd to your computer and use it in GitHub Desktop.
Save PrashantUnity/e6c24ae0e4689635746147b14bcbd3cd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Highlight.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>HighLight Js Example </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<!-- and it's easy to individually load additional languages like go.min.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/csharp.min.js"></script>
<!-- add custom theme agate.min.css all referenced from hljs-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/vs2015.min.css">
<Style>
/* for block of numbers */
.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: left;
/* Alignment of number */
color: rgb(255, 255, 255);
/* color of the numbering */
border-right: 3px solid rgb(255, 255, 255);
/* control vertical line */
vertical-align: top;
padding-right: 5px;
/* seperation between vertical line and number */
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
padding-right: 10px;
}
.hljs-ln td {
padding-right: 5px;
padding-left: 5px;
}
</Style>
</head>
<body>
<h2>C Sharp highlight</h2>
<div class="d-inline-flex bd-highlight">
<pre class="mb-0">
<code class="csharp rounded">class Program
{
static void Main(string[] args)
{
//var s = "Example Case of hljs As of date 10 Nov 2022";
var h = new int[] { 4, 2, 0, 3, 2, 5 };
var obj = new Program();
Console.WriteLine(string.Join(" ",h));
}
}
</code>
</pre>
</div>
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
</script>
</body>
</html>
Raw
WithAccordion.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>HighLight Js Example </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<!-- and it's easy to individually load additional languages like go.min.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/csharp.min.js"></script>
<!-- add custom theme agate.min.css all referenced from hljs-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/vs2015.min.css">
<Style>
/* for block of numbers */
.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: left;
/* Alignment of number */
color: rgb(255, 255, 255);
/* color of the numbering */
border-right: 3px solid rgb(255, 255, 255);
/* control vertical line */
vertical-align: top;
padding-right: 5px;
/* seperation between vertical line and number */
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
padding-right: 10px;
}
.hljs-ln td {
padding-right: 5px;
padding-left: 5px;
}
</Style>
</head>
<body>
<h2>C Sharp highlight</h2>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Two Sum
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="card">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the
bulk of the card's content.</p>
</div>
</div>
<div class="container-fluid">
<pre class="mb-0">
<code class="csharp rounded">public class Solution
{
public int[] TwoSum(int[] nums, int target)
{
var dict = new Dictionary< int, int >();
for (var i = 0; i < nums.Length; i++)
{
if (!dict.ContainsKey(nums[i]))
dict.Add(nums[i], i);
}
for (var i = 0; i < nums.Length; i++)
{
if (dict.TryGetValue(target - nums[i], out int j))
{
if (j != i)
return new int[] { i, j };
}
}
return new int[2];
}
}
</code>
</pre>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Four Sum
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="accordion-body">
This is the second item's accordion body. Let's imagine
this being
filled with some actual content.
<div class="container-fluid">
<pre class="mb-0">
<code class="csharp rounded">class Program
{
static void Main(string[] args)
{
//var s = "Example Case of hljs As of date 10 Nov 2022";
var h = new int[] { 4, 2, 0, 3, 2, 5 };
var obj = new Program();
Console.WriteLine(string.Join(" ",h));
}
}
</code>
</pre>
</div>
</div>
</div>
</div>
</div>
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
</script>
</body>
</html>
@PrashantUnity
Copy link
Author

image
Preview Example

@PrashantUnity
Copy link
Author

image

@PrashantUnity
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment