직접 구현

• 1차 수정: css에 아래 옵션을 줘서 배경 색 변경 및 선 추가 ✅

• 미해결☠️: 코드가 길어져 스크롤 바를 내리면 선이 따라 올라가지 않아 코드와 선이 겹침
• 2차 수정: background-attachment 옵션을 local로 설정 ✅

• 미해결☠️: Textarea 왼쪽에 줄 번호 추가
• 3차 수정: line_numbers 클래스의 div 추가 ✅

• 미해결☠️: Tab키로 들여쓰기 및 내어쓰기가 되지 않아 스페이스바로 들여쓰기를 해야함.
• 4차 수정: JQuery를 이용하여 들여쓰기, 내어쓰기 기능 구현 ✅

• 미해결☠️: 하지만 윗줄의 들여쓰기가 아랫줄에 이어지지 않음.
• 5차 수정: 자동 들여쓰기를 JQuery로 구현 ✅

CodeMirror를 이용한 구현

앞의 3차 수정까지 구현했을 때 CodeMirror를 알게되었습니다. Textarea에 CodeMirror를 적용하고 테마 변경 가능하도록 했었는데 줄 번호만 보이고 선은 보이지 않는 점이 만족스럽지 않았었습니다.

이후 트러블 슈팅을 작성하던 중에 '이왕 구현했던 거 조금만 더 다시 구현해 볼까?'라는 생각이 들어 앞의 5차 수정까지 구현하게된 것인데

CodeMirror가 테마 변경도 가능하고 태그와 텍스트의 색도 구별이 되어 가독성이 좋았지만 제가 직접 구현한 것이 줄번호, 선도 보이고 들여쓰기, 내어쓰기, 자동 들여쓰기 기능까지 구현되어서 CodeMirror 대신 제가 구현한 것을 쓰기로 결정하였습니다.

• CodeMirror 적용 JS 코드