SyntaxHighlighter 문제 해결 과정

프로그래밍/웹 프로그래밍 관련2017. 11. 23. 23:55

안녕하세요. 개발자 드리머즈입니다.

티스토리에 SyntaxHighlighter 적용 중에 생긴 문제를 해결한..

간단한 과정을 정리하려고 합니다.

문제의 원인부터 말씀드리면.. SyntaxHighlighter 공식 홈의 적용 가이드에

XRegExp.js에 대한 언급이 없어, 이 파일을 업로드&포함시키지 않아서 javascript 오류가 발생했기 때문입니다. 그런데 javascript 오류는 일반 모드에서 보이지 않고.. 개발자 모드를 켜야 보였습니다.

다시 문제를 알기 전으로 돌아가겠습니다. 티스토리에서 이리저리 코드를 수정해봐도 잘 동작하지 않아 local에서 테스트 해보기로 합니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SyntaxHighlighter 3.0.83 test</title>

<script type="text/javascript" src="./shCore.js"></script>
<script type="text/javascript" src="./shBrushCpp.js"></script>
<link type="text/css" rel="stylesheet" href="./shCore.css"/>
<link type="text/css" rel="stylesheet" href="./shThemeDefault.css"/>

</head>
<body>
<pre class="brush:cpp">
#include <stdio.h>
int main(void)
{
printf("Hello world!\n");
}
</pre>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</body>
</html>

위와 같은 간단한 html코드를 작성하고,

html파일과 동일한 위치에 공식홈에서 필요하다고 한 4개의 파일을 놓았습니다.

그리고 크롬에서 test.html을 실행시켰으나.. SyntaxHighlighter는 동작하지 않았습니다.

무슨 에러도 나오지 않아 뭐가 문제인지 감을 잡을 수 없었습니다. js파일과 css파일은 제대로 읽어오는지 궁금하여 개발자모드에서 새로고침을 해봤습니다.

1번 빨간색 영역에서 보듯이.. 파일은 정상적으로 읽어오는 게 보였습니다. 그런데 우연히 2번 빨간색 영역을 보니.. 뭔가 문제를 나타내는 것 같았습니다. 클릭하여 보니

3개의 파일에서 문제가 발생했다고 알려줍니다.

에러가 발생한 위치를 클릭하니.. XregExp를 찾지 못해서 발생한 문제라는 것을 알 수 있었습니다.

XregExp.js는.. SyntaxHighlighter에 포함된 파일이었습니다. 그래서 이 파일을 포함시켜 보기로 합니다.

코드에서도 추가를 해야 합니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SyntaxHighlighter 3.0.83 test</title>

<script type="text/javascript" src="./XRegExp.js"></script>
<script type="text/javascript" src="./shCore.js"></script>
<script type="text/javascript" src="./shBrushCpp.js"></script>
<link type="text/css" rel="stylesheet" href="./shCore.css"/>
<link type="text/css" rel="stylesheet" href="./shThemeDefault.css"/>

</head>
<body>
<pre class="brush:cpp">
#include <stdio.h>
int main(void)
{
printf("Hello world!\n");
}
</pre>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</body>
</html>

이렇게 수정한 다음에 새로고침을 하니,

드디어! 정상적으로 보였습니다.

javascript에서 문제가 생겨도 알기가 쉽지 않으니, 이럴 때 개발자 모드를 적극 이용해야겠다고 느꼈습니다.

SyntaxHighlighter 문제 해결 과정

댓글 영역

티스토리툴바

관련 글

댓글 영역

티스토리툴바