[Feature] Highlightcode 0.2.0 업그레이드 - 코드 블록 html 파일로 저장 시키기

[yonghyeun]

현재 코드 블록을 이미지로 변환하는 과정은 html -> image -> image url 을 클립 보드에 복사 or 로컬 파일로 저장과 같은 단계를 거친다.

이 때 업로드 하고자 하는 곳의 최대 이미지 크기가 예를 들어 800px 일 때 800px 이하의 이미지들은 적절하게 늘어나 가독성은 뛰어나나

문제가 되는 부분은 800px 이상인 경우엔 이미지가 압축되어 글자를 알아보기 힘들다는 점이다.

따라서 mdx 문법을 지원하는 블로그에서 사용 가능하도록 코드 블록을 html 형태로 복사 가능한 기능을 추가해보자

[yonghyeun]

우선 직접적으로 outter html 을 개발자 도구에서 복사하여 mdx 문법을 지원하는 벨로그에서 실험해본 결과는 다음과 같다.

인라인 스타일로 지정된 테마 스타일들은 잘 적용이 되지만 css 파일로 정해둔 스타일들은 복사한 html 태그에 적용이 되지 않기 때문에 해당 스타일이 복사가 되지 않는다.

/* html inline style로 적용되지 않는 스타일 속성들  */
figcaption {
  font-size: 1.2rem;
  font-weight: 500;
}

code {
  display: block;
}

.lineWrapper {
  display: flex;
}

.lineNumber {
  display: inline-block;
  text-align: right;
  margin-right: 1rem;
  width: 3rem;
}

.lineWrapper > span[data-line] {
  display: flex;
  flex-grow: 1;
}

따라서 클래스명으로 적용하던 스타일을 인라인 스타일 방식으로 변경해보도록 하자