This is a web tool to generate HTML code for highlight.js with the copy button. See the explanation below.
(2020/10/31 Add) I increased the supported languages. All commonly-used languages, VBA and VBScript can be selected. If you have requests for supported languages or features, feel free to post a comment!
日本語はこちら: highlight.js用 HTMLコード生成ツール (コピーボタン付き)
HTML Generator
Select Language:
Prefix:
Suffix:
Input Code Here:
Preview:
About This Tool
- This tool converts '<' into '<' and '>' into '>' with prefix/suffix for highlight.js.
- You can edit Prefix/Suffix (Prefix will be reset when you change language or title).
- You need to apply CSS and JavaScript(jQuery) to use the copy button (see samples below).
- This page does not use Cookie, so the setting will be reset when you leave this page.
- I wrote how to install highlight.js on blogger and add copy button. See reference at the bottom of this article.
Sample CSS and JavaScript
<style>
.hljs{
font-size: 15px;
font-family: Consolas, Menlo, sans-serif;
max-height:500px;
background:#f1f8ff;
}
.code-copy{
position:relative;
}
pre::before {
content: attr(title);
line-height: 1;
padding: .3em .5em .3em .5em;
margin: 0 0 0 0;
background: #f1f8ff;
color: #000;
font-size: 16px;
font-family: Consolas, Menlo, sans-serif;
}
.code-copy-btn{
position:absolute;
right:0;
top:0;
padding: .3em;
background:#779cff;
color:#fff;
border:0;
border-radius:5px;
font-size: 16px;
font-family: Consolas, Menlo, sans-serif;
}
.code-copy-btn:hover{
cursor:pointer;
opacity:0.9;
}
</style>
//jQuery is required.
<!-- jQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
<!-- [START] Code Copy Button -->
<script defer='defer'>
//<![CDATA[
$(function(){
$('.code-copy-btn').click(function(){
var codeText = $(this).siblings().text();
var $textarea = $('<textarea/>');
$textarea.text(codeText);
$(this).append($textarea);
$textarea.select();
document.execCommand('copy');
$textarea.remove();
$(this).text("Copied to clipboard!"); //Change text
//Restore original text after 2s
setTimeout(function(){
$('.code-copy-btn').text("Copy");
},2000);
});
});
//]]>
</script>
<!-- [END] Code Copy Button --> Reference
Forerunners
I learnt a lot from these tools and made my own.* for General Use * simple HTML escape/unescape tool (no prefix/suffix)
Free Online HTML Escape / Unescape Tool - FreeFormatter.com
One-Step Installation of highlight.js with copy button (English)
This is my article introducing how to install highlight.js (version 2).
itchingears-kamokamo.blogspot.com
No comments:
Post a Comment