highlight.js用のHTMLコードをコピーボタン付きで生成するためのWebツールを作ってみました。ご自由にお使いください。説明は下にあります。
2020/10/31: 選択できる言語を増やしました。CDNでサポートされているすべての主要言語とVBA、VBScriptが選べます。他の言語も選べるようにしてほしい、こんな機能を付けてほしいなどリクエストがあればお気軽にコメントしてください。
※日英両対応で公開していたツールですが、ちょっと見づらかったので分けました。
English here: HTML generator for highlight.js with the copy button
HTML生成ツール
Language:
Prefix:
Suffix:
Code:
Preview:
このツールについて
- highlight.js用に、前後タグ(Prefix/Suffix)付きで入力コード内の '<' を '<' へ、 '>' を '>' へ変換します。
- 前後タグ(Prefix/Suffix)を編集できます（言語やタイトル有無を変えるとリセットされます）。
- コピーボタンを使う場合は、CSSとJavaScript(jQuery)を用意してください（下のサンプル参照）。
- Cookieは使っていないので、このページを離れるとデフォルトに戻ります。
- highlight.jsとコピーボタンの導入方法については、下の参考をご覧ください。
サンプル CSS と 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 --> 参考
先輩ツール
これらのツールを使いながら学び、自分なりのものを作りました。* 汎用 * HTMLタグをエスケープできます（preタグ、codeタグも付けられます）
HTMLエスケープツール | Web制作小物ツール - dounokouno.com
* for SyntaxHighlighter * SyntaxHighlighter用に最適化されています
1研究中: 貼り付け用ソースコード生成ツール（SyntaxHighlighter用）
コピーボタン付き highlight.js の1ステップ導入方法（日本語）
highlight.js導入方法の紹介記事書きました（バージョン2公開しました）。
itchingears-kamokamo.blogspot.com
No comments:
Post a Comment