•
실습을 위한 코드 블록에는 명령어와 출력 정보와 입력 정보가 표현됨.
◦
모두 동일한 스타일이 반영되어 구분이 힘들다…
▪
명령어 부분은 코드 블록 BASH 스타일을 적용하지만 나머지는 부분은 톤 다운을 하고 싶다.
◦
코드 블록의 특정 영역에 스타일 변경하고 노션 페이지를 퍼블리싱해서 보면 원하는 형태로 보인다.
◦
하지만 oopy를 거치게되면 변경된 스타일은 무시되고 기본 코드 블록 스타일을 적용ㅠ
삽질의 추억
1.
새로운 토큰 스타일을 지정해서 대상을 매칭
.CodeBlock_code__MOUDT .special-xxx {
color: rgba(220, 220, 220, 1) !important;
}
HTML
복사
•
문자열이나 패턴을 지정해서 신규 토큰 스타일에 매칭해도 반영이 되지 않고 기존 스타일을 유지해서 무한 삽질
◦
결국 포기하고 다른 방안에 대한 고민
2.
BASH 코드 블록에 token.punctuation 스타일 발견
•
해당 스타일의 패턴은 괄호, 대괄호, 세미콜론 등을 처리하는 용도이다.
◦
마침 스타일도 원하는 라이트 그레이 색상으로 확인!!!
# punctuation 기본 패턴
/[{}[\];(),.:]/
HTML
복사
3.
token.puctuation 패턴을 추가해서 그레이 색상의 글꼴을 포함시키기
•
oopy HTML 편집에서 head 영역에 아래 코드를 삽입해서 전역 페이지 적용
<script>
document.addEventListener("DOMContentLoaded", function () {
// Bash 문법 확장
Prism.languages.bash = Prism.languages.extend('bash', {
'punctuation': [
Prism.languages.bash.punctuation,
{
pattern: /^OUTPUT:[\s\S]*?:END$/m, // OUTPUT: ~ :END 블록 매칭
greedy: true
},
{
pattern: /^INPUT:[\s\S]*?:END$/m, // INPUT: ... :END 블록 매칭
greedy: true
}
]
});
});
</script>
HTML
복사
•
기존 bash.puctuation 패턴에 2가지 패턴을 추가
◦
OUTPUT:으로 시작해서 :END로 끝나는 구간을 모두 포함하는 패턴
◦
INPUT:으로 시작해서 :END로 끝나는 구간을 모두 포함하는 패턴
수정 전 기존 코드 블록
•
개인적으로 명령어와 출력 정보와 입력 정보가 동일한 스타일을 적용받아 알록달록한 상황으로 구분이 힘들다.
수정 후 코드 블록
⇒ 명령어는 코드 블록 기본 스타일을 따르고, 출력 정보와 입력 정보는 그레이톤으로 바꿔서 구분이 쉬워졌다.
끝…