<aside> 💡

목차

</aside>

코드를 이쁘게 하이라이팅 하는 기능. 라이브러리 없이 구현해봤습니다. 시작합니다.

🍀 왜 직접 만들었는가?

문제점: 기존 라이브러리의 한계

• CodeMirror와 같은 기존 코드 하이라이트 라이브러리는 강력한 기능을 제공했지만, 블록 코딩과의 연동에서는 다음과 같은 한계를 보였습니다:
  1. 태그와 속성 분석의 제약
     • CodeMirror는 단순히 코드를 하이라이팅하는 데 초점이 맞춰져 있었으며, 태그, 속성, 값 등 코드의 세부 구조를 기반으로 한 동적 처리가 어려웠습니다.
  2. 블록과 코드의 상호 연동 불가
     • Blockly에서 생성된 블록과 대응하는 코드 부분을 찾거나, 사용자가 특정 블록을 클릭했을 때 해당 코드를 하이라이팅하는 기능이 불가능했습니다.
  3. 애니메이션 효과 제한
     • 변경된 코드 부분을 시각적으로 표현하는 동적 애니메이션 기능을 제공하지 않음.
  4. 맞춤형 스타일링의 어려움
     • 프로젝트별로 하이라이팅 스타일을 변경하려면 기존 라이브러리를 확장하거나 별도의 복잡한 작업이 필요했습니다.

🍀 라이브러리처럼 따로 구현

라이브러리처럼 재사용 가능한 code-highlighter 폴더 구현

• shared 안의 code-highlighter 폴더에 UI, 동적인 코드 생성 애니메이션, 좌측 선 hover 색상 효과 같은 기능을 구현하는 로직을 담아둠.
• blockly의 블록 대응 하이라이팅 기능은 못써도 기본 기능은 가져다가 붙이면 동작 가능하게 함

🍀 기능1: HTML/CSS 코드 파싱 및 하이라이팅

기능 설명

• HTML과 CSS 코드를 정규 표현식을 사용하여 태그, 속성, 값을 파싱.
• 파싱된 코드의 각 요소를 <span> 태그로 감싸고, 적절한 스타일을 적용.