UNPKG

5.85 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3<head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8
9 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
10
11
12 <style>
13 /* override badge styling */
14 .code-badge {
15 background: #555 !important;
16 padding: 8px !important;
17 }
18 .code-badge-copy-icon {
19 font-size: 1.3em !important;
20 }
21 .hide-on-load {
22 display: none;
23 }
24 </style>
25
26
27<link href="https://rickstrahl.github.io/highlightjs-badge/highlightjs/styles/vs2015.css" rel="stylesheet">
28<script src="https://rickstrahl.github.io/highlightjs-badge/highlightjs/highlight.pack.js"></script>
29
30 </head>
31<body class="hide-on-load">
32<div class="container">
33
34 <h1>HighlightJS Code Copying</h1>
35 <hr>
36
37 <h3 class="mt-3">Single line code snippet</h3>
38 <pre><code class="hljs language-js">let x = 1;
39x++;</code></pre>
40
41
42 <h3 class="mt-3">Single line code snippet</h3>
43
44 <pre><code class="hljs language-cs">public static string GetChecksumFromFile(string file)
45{
46 if (!File.Exists(file))
47 return null;
48
49 try
50 {
51 byte[] checkSum;
52 using (FileStream stream = File.Open(file, FileMode.Open, FileAccess.Read, FileShare.Read))
53 {
54 var md = new MD5CryptoServiceProvider();
55 checkSum = md.ComputeHash(stream);
56 }
57
58 return StringUtils.BinaryToBinHex(checkSum);
59 }
60 catch
61 {
62 return null;
63 }
64}</code></pre>
65
66
67<h3>Auto-Detected</h3>
68<pre><code>Content-Type: text/html
69Accept: application/json
70Content-Length: 12332
71</code></pre>
72
73
74</div>
75
76<script src="https://rickstrahl.github.io/highlightjs-badge/highlightjs-badge.js"></script>
77<!-- <script src="highlightjs-badge.js"></script> -->
78
79<script>
80 setTimeout(function () {
81 var pres = document.querySelectorAll("pre>code");
82 for (var i = 0; i < pres.length; i++) {
83 hljs.highlightBlock(pres[i]);
84 }
85 var options = {
86 contentSelector: "#ArticleBody",
87 // Delay in ms used for `setTimeout` before badging is applied
88 // Use if you need to time highlighting and badge application
89 // since the badges need to be applied afterwards.
90 // 0 - direct execution (ie. you handle timing
91 loadDelay:0,
92
93 // CSS class(es) used to render the copy icon.
94 copyIconClass: "fa fa-copy",
95 // CSS class(es) used to render the done icon.
96 checkIconClass: "fa fa-check text-success"
97 };
98 window.highlightJsBadge(options);
99 },10);
100</script>
101
102
103<!-- optional customization template -->
104
105<!-- Used in this demo and styling can be adjusted here -->
106<!-- <style>
107 .code-badge {
108 display: flex;
109 flex-direction: row;
110 white-space: normal;
111 color: white;
112 font-size: 0.8em;
113 opacity: 0.4;
114 border-radius: 0 0 0 7px;
115 padding: 5px 8px 5px 8px;
116 position: absolute;
117 right: 0;
118 top: 0;
119 }
120
121 .code-badge.semi-active {
122 opacity: .4;
123 }
124
125 .code-badge.active {
126 opacity: 0.8;
127 }
128
129 .code-badge:hover {
130 opacity: .95;
131 }
132
133 .code-badge a,
134 .code-badge a:hover {
135 text-decoration: none;
136 }
137
138 .code-badge-language {
139 margin-right: 10px;
140 font-weight: 600;
141 color: goldenrod;
142 }
143 .code-badge-copy-icon {
144 font-size: 1.2em;
145 cursor: pointer;
146 padding: 0 7px;
147 margin-top:2;
148 }
149 .fa.text-success { color: purple !important }
150</style>
151<div id="CodeBadgeTemplate" style="display:none">
152 <div class="code-badge">
153 <div class="code-badge-language">{{language}}</div>
154 <div title="Copy to clipboard">
155 <i class="{{copyIconClass}} code-badge-copy-icon"></i>
156 </div>
157 </div>
158</div> -->
159
160<!-- end customization template -->
161
162<script>
163if (typeof Object.assign !== 'function') {
164 // Must be writable: true, enumerable: false, configurable: true
165 Object.defineProperty(Object, "assign", {
166 value: function assign(target, varArgs) { // .length of function is 2
167 'use strict';
168 if (target === null || target === undefined) {
169 throw new TypeError('Cannot convert undefined or null to object');
170 }
171
172 var to = Object(target);
173
174 for (var index = 1; index < arguments.length; index++) {
175 var nextSource = arguments[index];
176
177 if (nextSource !== null && nextSource !== undefined) {
178 for (var nextKey in nextSource) {
179 // Avoid bugs when hasOwnProperty is shadowed
180 if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
181 to[nextKey] = nextSource[nextKey];
182 }
183 }
184 }
185 }
186 return to;
187 },
188 writable: true,
189 configurable: true
190 });
191}
192
193if (!String.prototype.trim) {
194 String.prototype.trim = function () {
195 return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
196 };
197}
198
199setTimeout(function() {
200 document.body.classList.remove('hide-on-load');
201},90);
202</script>
203
204</body>
205</html>