•
Code Block에 한해 명령어 마다 주석 대신 Caption으로 사용하고 싶은 욕구
•
그런 의미에서 Caption 위치를 Code Block 상단으로 배치하도록 진행
◦
Caption이 없을 경우 Code Block 상단 영역을 reserve 할 필요가 없어 예외 처리 필요
단, Code Block 외의 Caption은 기존 상태 그대로 유지.. 예) 이미지 캡션
적용 전 코드 블록
Caption: 수정 전 코드 블록 주석 처리
적용 후 코드 블록
oopy html 편집에서 head 영역에 아래 코드를 추가해서 전역으로 적용하도록 한다.
<script>
document.addEventListener("DOMContentLoaded", function () {
function processCodeBlock(block) {
// 해당 블록의 캡션 확인
var caption = block.querySelector(".CaptionProperty_container__E_hpX");
if (caption && !block.classList.contains("has-caption")) {
block.classList.add("has-caption");
block.classList.remove("no-caption");
} else if (!caption && !block.classList.contains("no-caption")) {
block.classList.add("no-caption");
block.classList.remove("has-caption");
}
}
// 초기 로드 시 모든 코드 블록 처리
var initialBlocks = document.querySelectorAll(".CodeBlock_block__kCISx");
initialBlocks.forEach(processCodeBlock);
// MutationObserver로 동적으로 추가되는 코드 블록 처리
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
mutation.addedNodes.forEach(function (node) {
if (node.classList && node.classList.contains("CodeBlock_block__kCISx")) {
processCodeBlock(node); // 새로 추가된 코드 블록 처리
}
// 하위 요소에 코드 블록이 있을 경우 처리
if (node.querySelectorAll) {
var nestedBlocks = node.querySelectorAll(".CodeBlock_block__kCISx");
nestedBlocks.forEach(processCodeBlock);
}
});
});
});
// 감시 시작
observer.observe(document.body, { childList: true, subtree: true });
});
</script>
<style>
/* 캡션이 있는 블록 */
.CodeBlock_block__kCISx.has-caption {
padding-top: 30px !important; /* 캡션을 위한 상단 여백 */
}
/* 캡션이 없는 블록 */
.CodeBlock_block__kCISx.no-caption {
padding-top: 0 !important; /* 캡션이 없으므로 여백 제거 */
}
/* 캡션 스타일 */
.CodeBlock_block__kCISx .CaptionProperty_container__E_hpX {
position: absolute !important; /* 부모 기준으로 절대 위치 */
bottom: 100% !important;
margin-bottom: 0px !important;
z-index: 1000 !important;
}
</style>
Bash
복사
# Code Block의 Caption 위치 변경 코드
Caption: 수정 후 코드 블록 주석 처리
기존에 비해 가시성 향상!!
코드 블록 단위 복사에 유리!!
끝!!