経緯
便利なポータルは当たり前にどこでもあるわけじゃないらしい
ポータルなんていちいち作ってる暇がないのかもしれない
ソースコードをレビューしてもらうのに共通のエディターでないと不便
Boxからｻｸﾗｴﾃﾞｨﾀで開こうとすると１分間ぐらい止まる
という非常に不便だと思ってHTMLで作ってしまえと思った次第で
ゴール
ｻｸﾗｴﾃﾞｨﾀに劣らない見る専用のページを無料で作る
ここ間違ってるとか、ここおかしいとか行番号で言える
（↓画像のような）
ねたばらし
CSS で<span>の数だけ行番号を生成するように仕掛けてるみたいです
なので、行番号足りなくなったら、その分コピペする感じです
sample.html
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example2" tabindex="0">
<pre><h2>ファイル名：sample.bat</h2><div><code class="dos">
@echo on
REM;/ params
set log=%~dp0log_%DATE%.log
set outFile=%~dp0sample_query_console_output.log
REM;/ sqlcmd operation
set flg=100
start /b sqlcmd -S localhost -E -d master -q "select * from dbo.table_1" -o %outFile%
if exist %outFile% ( echo %TIME% :%outFile%>>"%log%" )else ( set flg=200 )
exit /b %flg%
</code>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span>
<div class="line-numbers">
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span>
</div>
</div>
</pre>
</div>
詳しくは参考にした人の投稿をみてください
以下は、外側のスクリプトです
sample.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<!---- body ------>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
<!-- 行番号つけたい -->
<style>
pre {
position: relative;
padding: 20px 50px;
}
.line-numbers {
position: absolute;
top: 0;
left: 0;
padding: 20px 5px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-right: 1px solid #999;
width: 50px;
}
.line-numbers > span {
float: left;
display: block;
counter-increment: linenumber;
text-align: right;
width: 100%;
}
.line-numbers > span::after {
content: counter(linenumber);
}
</style>
<!-- シンタックスハイライトも欲しい -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
くだらないけど、HTMLでこんなこともできるって面白いですよね
参考
↓シンタックスハイライトさせる便利ライブラリのhighlight.js
https://highlightjs.org/
↓CSSで行番号を作るテクニックは以下の投稿をそのままパクりました。
https://qiita.com/Ria0130/items/b49b13e4ff935993c813