行番号付きのソースコード表示
一昔前ではソースコードが大変見にくかったです。CSSとJavaScript進化で現在は見やすくなっています。当ホームページでもソースファイルを 公開しています。こんなスタイルです。

#include <stdio.h>
#include <math.h>

#define PI 3.1415926535
さりげなく表示されていますが、htmlファイルに直接ソースをコピペすると
<

>
が表示されません。<>はタグなので
&lt;&gt;
を使わないとダメです。いちいち変換するのは面倒です。しかし、Microsoft Expression Web4を使えば自動的に変換してくれます。デザイン画面でコピペすればOKです。
これでも全然問題ないのですが、行番号付きのソースコード表示では説明の際に何かと便利と思い実施することにしました。 いろいろ調べて見ましたが、あまり役立つ情報にたどり着けなかったです。結論として、
Google Code Prettify
を使うのが簡単そうです。
方法:
<head></head>の間に、
<script async src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="linenums.css" />
を貼り付けます。linenums.cssは自分の好みにカスタマイズしました。
利用法は、
<pre class="prettyprint linenums">
中身
</pre>
これだけです。
実際に以下に行番号付きのソースコードを表示します。
BOOL CGraph::CreateEx(CWnd* pParentWnd)
{

DWORD dwExStyle = 0;
LPCTSTR lpszClassName = AfxRegisterWndClass(
CS_VREDRAW | CS_HREDRAW,
::LoadCursor(NULL, IDC_ARROW),
(HBRUSH) ::GetStockObject(WHITE_BRUSH) );

DWORD dwStyle = WS_POPUPWINDOW | WS_CAPTION;
RECT rect;
HWND hwnd = ::GetDesktopWindow();
::GetWindowRect(hwnd, &rect);
int w = 840;
// int h = rect.bottom / 5;
int h = 460;
rect.left = 0;
rect.right = rect.left + w;
rect.top = 0;
rect.bottom = rect.top + h;
return CWnd::CreateEx(dwExStyle, lpszClassName, _T("Amplitude and Phase"), dwStyle, rect, pParentWnd, 0, NULL);
}

TABがスペースに変換されていません。TABをスペースに変換できるエディタを使えばソースからhtmlにするのが楽です。
VS Codeは対応しています。

ダウンロード:linenums.css