티스토리 코드 블럭 원하는 언어로 수정하기
Tistory 에디터에서 에디터의 모드를 "기본모드" 에서 "HTML" 로 바꿔서 일일이 하나하나 코드블럭을 찾아 수정해야한다.
하지만 개발자인 본인은 그런 비효율적인 행동을 싫어한다.
글 목차
코드 블럭 한 번에 수정하기
일단 코드 블럭 언어 중에서 현재 에디터에 사용하지 않는 언어를 선택해서 해당 언어로 코드 블럭을 생성한다.
본인은 추후에도 "Go" 언어를 배울 생각이 없으므로 "Go" 언어로 예시를 들겠다.
해당 UI를 통해 평소 처럼 코드블럭을 삽입한다. 하지만 코드블럭의 언어는 "Go" 언어로 되어있는 상태다.
처음부터 바로 언어를 변경할 게 아니라, 앞으로 코드블럭을 수정할 수 도 있으니 일단 게시글을 끝까지 작성한다.
개발자 블로그라면 여러 코드 블럭이 "Go" 언어로 작성되어 있을 것이다.
"Go" 언어로 되어있지 않은 코드블럭은 수정되지 않는다!
이제 에디터에서 F12 를 눌러 DevTools 를 켠다
다음과 같이 Console 탭으로 들어간다.
Console 에서 > 에 커서를 대고 클릭을 한다.
결론
하단의 코드를 붙여넣기 하고, 엔터를 치면 일단 jQuery 라는 것을 사용할 수 있게 해준다.
var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type.
jQuery.noConflict();
그 다음으로 하단의 코드를 붙여넣기 하면 자동으로 "Go" 언어로 작성된 모든 코드블럭의 언어가 "rust" 언어로 변경된다.
var srclang = 'go';
var dstlang = 'rust';
$("*."+srclang+".hljs").each(function(index, item){
item.setAttribute('class',dstlang + ' hljs');
item.setAttribute('data-ke-language',dstlang);
});만약 사용하지 않는 언어가 Go 언어가 아니라면 문자열 변수 srclang 의 값을 변경하면 되며, rust 언어가 아닌 다른 언어로 변경하고 싶다면 문자열 변수 dstlang 의 값을 변경하면 된다.
참고로 대소문자 구분을 하지 않지만, 되도록이면 소문자로 작성해라. 언어 별로 코드 블럭을 꾸며주는 highlight.js 스크립트가 소문자로 동작한다.
성공적으로 완료가 되었다면 위의 이미지와 비슷하게 보인다.
마지막 줄은 변경된 코드 블럭의 개수를 알려준다.
참고 사항
두 개의 코드를 한 번에 복사해서 한 번에 실행하면 오류가 발생한다.
반드시 위에 먼저 실행하고 나서 아래 코드를 실행하기 바란다.
각 언어는 javascript 에서 다음과 같이 연결된다.
| 언어 이름 | Javascript 문자열 | 언어 이름 | Javascript 문자열 |
| Bash | bash | PHP | php |
| C# | csharp | Python | python |
| C++ | cpp | R | r |
| CSS | css | Ruby | ruby |
| Delphi | delphi | SQL | sql |
| Go | go | Scala | scala |
| HTML | html | Shell | shell |
| JAVA | java | Swift | swift |
| JavaScript | jvavscript | TypeScript | typescript |
| Kotlin | kotlin | VB.Net | vbnet |