이번에 “git 알아보기” 를 정리하면서 터미널 출력들이 code block pro로는 표현이 제대로 안되고 칼라가 엉망이 되는 경우가 많았다. 방법이 없나 찾아봤는데, 기본적으로는 터미널을 html출력으로 변환해서 wordpress에서 html block을 사용해 표시하는 방법이다. 여기에는 두가지 방법이 있었다.
Terminal > 우클릭 > HTML로 저장
터미널에서 우클릭을 눌러 “html로 저장하기” 방법이 있었지만, 배경칼라는 적용이 안되는 문제가 있었다.
~/g/myproject │ main ?1 git log --graph --oneline ✔ │ 10:18:55 * bd63cc8 (HEAD -> main, origin/main, origin/HEAD) remote conflict has resolved again * 7218e18 remote conflict has resolved |\ | * c3db55b myproj changed * | 505b455 user2_mp changed |/ * 82761a2 Let's modify remote * 59513b6 (origin, animal) add cat sound * 1d9d3e7 conflict resolved * b7ae4b0 add love and ask func. * a83283b conflict resolved |\ | * 78f1da3 test added 'main changed' | * fac78e4 new-feature is merged to main | |\ | * | d19622e (tag: v0.1test, testing) add call() to saying.py * | | ca5c7c8 text added 'new_feature changed' | |/ |/| * | 5737e57 add shout() to saying.py |/ * 650a1e6 (tag: v0.1release) delete dont_needed_anymore.txt * b502882 add file maybe dont needed anymore later * a67ee7e add more text to readme.txt * 046e349 add sleep function * 0d52a66 the first commit.
해결 방법은 html에 직접 배경색에 대한 css를 추가하는 것이다.
<style>
.terminal {
background-color: black;
color: white;
padding: 12px;
}
</style>
<pre class="terminal"><pre> 태그에 class를 지정하고 그 클래스에 대한 css로 검정배경과 흰색 전경색으로 지정했다.
추가한 결과는 다음과 같다.
~/g/myproject │ main ?1 git log --graph --oneline ✔ │ 10:18:55 * bd63cc8 (HEAD -> main, origin/main, origin/HEAD) remote conflict has resolved again * 7218e18 remote conflict has resolved |\ | * c3db55b myproj changed * | 505b455 user2_mp changed |/ * 82761a2 Let's modify remote * 59513b6 (origin, animal) add cat sound * 1d9d3e7 conflict resolved * b7ae4b0 add love and ask func. * a83283b conflict resolved |\ | * 78f1da3 test added 'main changed' | * fac78e4 new-feature is merged to main | |\ | * | d19622e (tag: v0.1test, testing) add call() to saying.py * | | ca5c7c8 text added 'new_feature changed' | |/ |/| * | 5737e57 add shout() to saying.py |/ * 650a1e6 (tag: v0.1release) delete dont_needed_anymore.txt * b502882 add file maybe dont needed anymore later * a67ee7e add more text to readme.txt * 046e349 add sleep function * 0d52a66 the first commit.
결과물은 좋긴한데, 단점은 매번 편집을 해야 하네.
aha 이용 (ANSI to HTML)
두번째 방법은 aha 유틸리티를 이용하는 것이다. 이건 출력물을 html로 포매팅 해준다. 일단 설치를 해야겠지. 데비안이나 우분투는 간단하게 다음과 같이 설치가 된다.
sudo apt install aha사용법은 aha에 파이프 입력으로 터미널 출력을 내보내고 그 출력을 이를 html파일로 내보내면 된다. 실제 사용법은 다음과 같다.
git log --graph --oneline --decorate --color=always | aha --black > output.html
여기서 중요한건 각종 옵션들을 꼭 써줘야 한다는 점이다. 제일먼저, “–decorate”가 빠지면 안된다. 이게 없어도 터미널에서는 제대로 보이지만, 출력을 파이프로 돌리는 순간, 정확한 이유는 모르겠지만 tag, branch정보들이 빠지게 된다. 다음으로 terminal 명령어에 “–color=always” 옵션을 꼭 넣어줘야 한다. 그렇지 않으면, teminal이 아닌걸로 인식해서 color정보가 빠진다. 마지막으로 aha에 “–black” 옵션을 넣어줄 것. 그렇지 않으면 여기서도 흰 배경을 쓰게 된다. 앞에서 style을 직접 설정해줬던 작업을 여기서는 옵션 하나로 처리하는 것이다.
문제는 body의 background color가 내 블로그도 바꿔버린다는게 문제다. 결국 포기. 문제가 없는 사람은 사용을 해도 될거 같다. 아니면, 간단하게 내가 앞뒤로 태그 붙이는 유틸리티를 만들어야 할듯.
진작에 알았으면, 이거 이용해서 포스팅을 했을텐데…
… 블로그의 배경색까지 바뀌는 문제를 피하는 해결책을 바로 python으로 만들었다. aha 출력물을 내가 원하는 css style로 감싸주는 간단한 텍스트 툴이다. 배경 검은색과 터미널에 맞는 폰트를 설정해준다.
사용법은 다음과 같다.
git log --graph --decorate --color=always | aha -n | t2w.py > output.html파이프라인으로 aha가 받아와서 html, head, body를 제외한 내용물을 받아와서 앞뒤로 <pre> 태그를 씌워 style을 먹이는 방식이다. 더 쉬운방식이 있을까? 사용하기 쉽게 쉘에서 alias를 몇개 더 만들었다.
#alias for terminal to html
alias aha="aha -n|t2w.py"
alias ahaf="aha -n|t2w.py > terminal.html"
#alias for git
alias glog="git log --graph --oneline --decorate --color=always"