— 蛇足なHTML — sakuraeditorのようなページを作ってみた

# 経緯
便利なポータルは当たり前にどこでもあるわけじゃないらしい

ポータルなんていちいち作ってる暇がないのかもしれない

ソースコードをレビューしてもらうのに共通のエディターでないと不便

Boxからｻｸﾗｴﾃﾞｨﾀで開こうとすると１分間ぐらい止まる
という非常に不便だと思ってHTMLで作ってしまえと思った次第で

# ゴール
ｻｸﾗｴﾃﾞｨﾀに劣らない見る専用のページを無料で作る
ここ間違ってるとか、ここおかしいとか行番号で言える
（↓画像のような）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679069/0387cece-7ff5-98b7-9a8f-3ff95b4d7264.png)

# ねたばらし

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