코드문법강조 4

[VS Code] Windows 11 Pro에 Visual Studio Code를 설치해보자

Visual Studio Code에 대해 알아보고 설치해보자.필자는 블로그 올릴글을 편집할때 VS Code를 이용하는편이다.보통 HTML편집을 사용하는데 가벼우면서도 많은 기능을 지원한다.VS Code란?비쥬얼 스튜디오 코드(Visual Studio Code 이하 VS Code)는 마이크로소프트에서 개발한 무료 오픈 소스코드 편집기이다.2015년에 처음 출시되었으며 이후 여러 프로그래밍 언어를 지원하며 코드 강조 표시, 자동 완성 및 디버깅 기능까지 지원한다.VS Code의 장점1. 크로스 플랫폼 호환VS Code의 가장 큰 장점은 Windows, MacOS, 심지어 Linux에서도 실행가능한 플랫폼 호환성이다.(필자도 Mac Air를 들고다닐때 유용하게 사용하였다.)2. 가벼운 사양VS Code는 매우..

[Blog] highlight.js 제목 라벨 기능 추가(사용 언어 표시)

highlight.js에 적힌 소스코드가 어떤 언어인지 제목 라벨에 표시해주자.현재 필자의 블로그를 보면 소스강조구문(highlight.js)위에 해당 소스코드가 어떤 언어인지 표시가 되어있다.필자와 같이 해당 기능을 추가해도록 해보자.CSS 추가우선 아래 CSS부터 추가 해주자..highlightTopDiv { /*텍스트 관련*/ font-size: 16px; font-weight: bold; text-transform: uppercase; /*대문자로 표시해주기*/ /*색상 관련 - 각자 자기가 결정한 스킨에서 색을 추출하길 추천함*/ color: #FFB871; background-color: #222222; /*그림자 효과 관련*/ margi..

Blog 2025.01.09

[Blog] highlight.js 사용하기(기능확인 및 HTML로 사용하기)

highlight.js의 사용방법을 알아보자.아직 highlight.js 설치가 되지 않은사람은 아래 링크를 먼저 보고 오자.   [Blog] highlight.js 설치하기(티스토리에 설치하기) highlight.js를 직접 설치해보자.이전 블로그글 [Blog] 소스 코드 하이라이트 기능 사용하기 (Syntax Highlight 티스토리 버전)에서 티스토리 플러그인 코드 문법 강조 (Syntax Highlight)기능 설정과 사용방법 mirwebma.tistory.com 티스토리 플러그인 사용방법과 동일하게 사용하기티스토리 플러그인 사용방법과 동일하게 글쓰기에서 더보기 -> 코드블럭 클릭후 코드를 입력하면 된다.자세한 방법은 [Blog] highlight.js ..

Blog 2025.01.09

[Blog] highlight.js 티스토리 버전 설치 및 사용법(Syntax Highlight 사용하기)

Syntax Highlight를 티스토리에 적용해보자.블로그를 몇년만에 다시 시작하고 있는데 티스토리에 정말 많은 기능이 생겨나있다.그중 예전에 꽤나 고생해서 넣었던 코드 문법 강조(소스 코드 하이라이트)기능을 그냥 지원해주고 있던거에 깜짝 놀랐다.조금더 알아 보니 원래 적용하고 있던 Syntax Highlight가 아니라 highlight.js에서 제공하는 비슷하지만 다른 기능이였다.기존 사용하던 Highlight(이하 SH)는 점점 퇴보해서 유지보수 및 업데이트가 되지 않고 있으며 충돌도 자주 일어난다고 한다.그래서 모두들 highlight.js로 갈아타는중이라는 글들을 보았다.(실제로 SH홈페이지에 들어가 보았지만 왠 이상한 Wallpaper홈페이지에 들어가진다.)(기존 SH주소 : http://a..

Blog 2025.01.08