본문 바로가기

IT/Blog Tip

[티스토리] SyntaxHighlighter의 물음표(Question Mark) 제거

블로그에 스크립트나 소스코드 등을 깔끔하게 보여주기 위해 SyntaxHighlighter를 사용합니다.

각 언어에 맞는 하이라이팅 기능으로 가독성이 좋아집니다.

SyntaxHighlighter설정하는 방법은 아래 링크에서 확인 가능합니다.

2016/12/26 - [IT/컴퓨터/Blog Tip] - [티스토리] 깔끔한 코드 적용을 위한 SyntaxHighlighter 적용

우측 상단에 물음표(question mark)가 표시됩니다.

코드가 길어지면 물음표가 코드를 가리는 경우가 있습니다.

티스토리에 적용된 SyntaxHighlighter의 물음표는 다음과 같이 삭제가 가능합니다.

SyntaxHighlighter가 적용된 상태에서 작업을 진행합니다.

적용된 코드 부분에 아래 내용을 입력하면 됩니다.

<style type="text/css">
	.syntaxhighlighter .toolbar {
		display : none;
	}
</style>

간단하게 물음표가 제거가 됩니다.

불필요한 수직 스크롤바까지 제거하는 코드를 포함해서 최종적으로 다음과 같이 작성됩니다.

<!-- SyntaxHighlighter -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushErlang.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushPowerShell.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeEmacs.css">

<script type="text/javascript">
SyntaxHighlighter.all();
</script>

<style type="text/css">
  .syntaxhighlighter { 
     overflow-y: hidden !important; 
     overflow-x: auto !important; 
  }
	.syntaxhighlighter .toolbar {
		display : none;
	}
</style>
<!-- SyntaxHighlighter -->

물음표가 제거되면서 코드의 가독성이 좀 더 좋아집니다.