티스토리

[티스토리] Codepen 코드블럭 적용 시키기

코드펜은 HTML, CSS, JS를 작성하고 결과를 실시간으로 확인할 수 있는 유용한 코딩 사이트입니다. 또한 제작한 코드를 공유하는 데에도 유용하기에 많은 코딩 블로그가 애용하는 코딩 사이트이기도 합니다. https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 간단 요약 계정 필요, 가입, 로그인 Pen 생성 후 코드 작성 Save 버튼 클릭 후 Embed 버튼 클릭 설정 후에 HTML 코드를 ..

[티스토리] JavaScript 소스코드 하이라이트 추가하기

문제점 해당 블로그는 티스토리에서 제공해주는 플러그인 코드 테마를 사용하고 있습니다. 하지만 JavaScript 코드 블록에 소스코드를 입력하면 메서드 부분이 똑같은 검은색이어서 가독성을 해치는 것 같았습니다. highlight.js를 사용해보기도 하였고 다른 방법을 찾아보았지만 만족하는 코드 하이라이트를 찾지 못하였습니다. 결국 나온 결론이 " 구현되어있는 하이라이트 원하는 기능에 추가를 시키자! "였습니다. 해결 먼저 하이라이트 된 코드의 색깔 스타일을 추가했습니다. 그 후 선언된 하이라이트 코드 블록 모두를 가져와 정규식으로 메서드인 코드만을 구분했고 스타일을 적용시켰습니다. $target .html(html.replace(/(\.[A-z]+\()/g, `$1`)) .html(html .replac..