VSCodeを使っての表記 - Rosso Laboratory

今回はプログラムを書く方だけが対象となるような話です(^_^;)

今までcodeタグ、マークダウン記法、リストとソースコードをブログで記載する上で最も良い方法を探ってきましたが、今回のVisual Studio Codeというプログラム開発エディタを使う方法がベストかなと考えています。

まずVSCodeでソースコードを書き、全て選択してコピーし、「編集見たまま」にペーストします。そうすると

#OBJID=8
import vrmapi
def vrmevent_8(obj,ev,param):
    di = obj.GetDict()
    if ev == 'init':
        di['switch'] = 0
        obj.SetEventKeyDown('Q',100) #使用キーに書き換え
    elif ev == 'broadcast':
        dummy = 1
    elif ev == 'timer':
        dummy = 1
    elif ev == 'time':
        dummy = 1
    elif ev == 'after':
        dummy = 1
    elif ev == 'frame':
        dummy = 1
    elif ev == 'catch':
        dummy = 1
    elif ev == 'active':
        dummy = 1
    elif ev == 'view':
        if param['focus'] == 0:
                di['switch'] = 0
    elif ev == 'keydown':
        if param['eventUID'] == 100:
            if di['switch'] == 0:
                obj.SetView()
                di['switch'] = 1
            elif di['switch'] == 1:
                vrmapi.LAYOUT().SetViewGlobal(True)
                di['switch'] = 0

このようになり、余計な行が１行づ入ってしまいます。そこで「HTML編集」にて、

この赤い部分を削除してやります。そうすると

#OBJID=8

import vrmapi

def vrmevent_8(obj,ev,param):

di = obj.GetDict()

if ev == 'init':

di['switch'] = 0

obj.SetEventKeyDown('Q',100) #使用キーに書き換え

elif ev == 'broadcast':

dummy = 1

elif ev == 'timer':

dummy = 1

elif ev == 'time':

dummy = 1

elif ev == 'after':

dummy = 1

elif ev == 'frame':

dummy = 1

elif ev == 'catch':

dummy = 1

elif ev == 'active':

dummy = 1

elif ev == 'view':

if param['focus'] == 0:

di['switch'] = 0

elif ev == 'keydown':

if param['eventUID'] == 100:

if di['switch'] == 0:

obj.SetView()

di['switch'] = 1

elif di['switch'] == 1:

vrmapi.LAYOUT().SetViewGlobal(True)

di['switch'] = 0

このようになります。これでも良いのですが出来れば行番号も入ってくれると嬉しい。そこでBingにて「div 行番号」を検索したらCopilotが次のように提案してきました。

方法1: CSSを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.line-numbers {
counter-reset: line;
}
.line-numbers div {
counter-increment: line;
position: relative;
padding-left: 30px;
}
.line-numbers div::before {
content: counter(line);
position: absolute;
left: 0;
width: 25px;
text-align: right;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="line-numbers">
<div>行1の内容</div>
<div>行2の内容</div>
<div>行3の内容</div>
</div>
</body>
</html>