너무 많은 노력없이 절차와 검증 증거를 남기고 싶습니다.

개요

너무 힘들지 않고 절차서와 검증 증거를 남기고 싶다.
"지금은"이것이 좋을까라고 생각한 것을 썼습니다.

이용 장면의 가정

포맷 등 정해지지 않은 내부용의 순서서나, 간단한 검증 결과의 기록을 하는 경우.
절차와 증거는 명령과 화면 캡처가 혼합되어 있습니다.
※Windows의 상정.

준비하는 것

Visual Studio Code

Markdown All in One

Paste Image

할 수 있게 되는 것

Visual Studio Code

텍스트를 쓸 수 있다

추가 기능을 추가할 수 있습니다

Markdown All in One

HTML 출력 이미지를 미리 볼 수 있습니다

HTML 출력이 가능

목차가 자동 생성될 수 있다

Paste Image

캡처를 직관적으로 붙여 넣을 수 있습니다

할 수 있게 되는 것(상세)

Visual Studio Code

자세한 설명은 생략하고 소개 페이지를 붙이는 것만으로합니다.

htps : // 오즈레. mic로소 ft. 코 m / 쟈 jp / p 로즈 cts /

Markdown All in One

HTML 출력 이미지를 미리 볼 수 있습니다.

Ctrl + Shift + v 에서 미리보기를 볼 수 있습니다.
다시 누르면 미리보기가 닫힙니다.
출력 이미지를 확인하는 데 사용할 수 있습니다.

HTML 출력 가능

다음 작업을 수행하면 Markdown 파일과 동일한 폴더에 HTML 파일이 출력됩니다.
1. Ctrl + Shift + P 에서 명령 팔레트 표시
2. html3. 후보에서 Markdown All in One : Print Current document to HTML를 선택합니다.



다만, 이미지의 파일 패스가 디폴트라고 절대 패스가 되어 있기 때문에, 이대로는 다른 사람에게 건네줄 수 없습니다.

HTML을 텍스트 에디터로 확인. 절대 패스가 되고 있다.

<p><img src="file:///d:\dev\****\****\images\201217-23-07-08.png" alt=""></p>

그러므로 귀찮지만 다음과 같이 설정을 변경합니다.
1. Ctrl + , 에서 설정 화면 열기
2. Absolute Img Path3. Convert image path to absolute path의 확인란을 제거합니다.

HTML을 텍스트 에디터로 확인. 상대 패스가 되었다.

<p><img src="images/201217-23-07-08.png" alt=""></p>

목차가 자동 생성 가능

화면 캡처가 많고 스크롤이 많은 절차는 편리하다고 생각합니다.
다음 조작을 하면 커서를 맞춘 위치에 목차가 생성됩니다.
1. Ctrl + Shift + p 에서 명령 팔레트 표시
2. toc3. 후보에서 Markdown All in One : Create Table of Contents를 선택합니다.

Paste Image

캡처를 직관적으로 붙여넣을 수 있음

Ctrl + Alt + v 에서 클립보드 캡처를 직관적으로 붙여넣을 수 있습니다.
실제로 캡처를 이미지로 저장하고 이미지 경로를 Markdown에 붙여넣습니다.



이미지는 Markdown 파일과 동일한 계층 구조로 출력됩니다.

또, 이하와 같이 설정을 변경하는 것으로, 출력처의 지정이 가능합니다.
1. Ctrl + , 에서 설정 화면 열기
2. pasteimage.path3. Paste Image: Path의 값 변경
※디폴트: ${currentFileDir} 로 되어 있다. ${currentFileDir}/images 등으로 한다.

출력 이미지

이러한 절차를 작성할 수 있습니다.

※ 내용은 이쪽의 Asciidoctor 설치 순서를 사용했습니다.
htps : // 코 m / 아키 나스 / ms / 450 009 dc5 cd d7 f0 a cb

HTML

Markdown

# Asciidoctorのインストール検証

- [Asciidoctorのインストール検証](#asciidoctorのインストール検証)
  - [Rubyをインストールする](#rubyをインストールする)
    - [Rubyバージョンを確認する](#rubyバージョンを確認する)
    - [Asciidoctorをインストールする](#asciidoctorをインストールする)
    - [実行確認](#実行確認)
      - [sample.adocとして保存](#sampleadocとして保存)
      - [AsciidoctorでHTMLを出力する](#asciidoctorでhtmlを出力する)

## Rubyをインストールする

[Ruby-Install](https://rubyinstaller.org/downloads/)
### Rubyバージョンを確認する
Ruby 2.7.1-1であること。
```
ruby -v
```
![](images\201217-23-04-38.png)
### Asciidoctorをインストールする
gemでAsciidoctorをインストールし、インストールできたことを確認
```
gem install asciidoctor
gem list --local
```
![](images/201217-23-05-28.png)

### 実行確認
実際にHTMLを出力できることを確認
以下の内容をテキストに貼り付けてAsciidoctorのコマンドを実行
#### sample.adocとして保存
```
== レベル 1
Text.

=== レベル 2
Text.

==== レベル 3
Text.

===== レベル 4
Text.

.データ形式はCSV, 各カラム幅は表示域の15% (60 ÷ 4 = 15)
[format="csv",width="60%",cols="4"]
[frame="topbot",grid="none"]
|======
1,2,3,4
a,b,c,d
A,B,C,D
|======
```

#### AsciidoctorでHTMLを出力する
```
asciidoctor sample.adoc
```
![](images/201217-23-07-08.png)

결론

그건 그렇고,이 기사는 HackMD에서 썼습니다.
공개해도 좋은 것은 HackMD를 추천합니다.

함께 읽고 싶다 · ·
CodiMD에 의한 문서 작성 추천