> 웹 프론트엔드 > JS 튜토리얼 > 구문 강조 표시 사용_javascript 기술

구문 강조 표시 사용_javascript 기술

WBOY
풀어 주다: 2016-05-16 19:11:44
원래의
1317명이 탐색했습니다.

코드 배치

페이지에 코드를 배치하고

</tt> 태그로 묶습니다. <tt>name</tt> 속성을 ​​<tt>code</tt>로 설정하고 <tt>class</tt> 속성을 ​​사용하려는 <a href="http://code.google.com/p/syntaxhighlighter/wiki/Languages">언어 별칭</a> 중 하나로 설정하세요. </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="code" style="PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; MARGIN-LEFT: 2em; BORDER-LEFT: #ccc 3px solid; PADDING-TOP: 0.5em"><pre name="code" class="c-sharp">
... some code here ...
로그인 후 복사

참고: 주의해야 할 중요한 사항 중 하나는 삼각 괄호 <를 여는 것입니다. 모든 경우에 <에 해당하는 HTML로 대체되어야 합니다. 실패하면 페이지가 손상되지 않지만 표시된 소스 코드가 손상될 수 있습니다.

</tt>의 대안은 <tt><textarea></tt> 태그를 사용하는 것입니다. 이 경우 <tt><</tt> 문자에는 문제가 없습니다. 주요 문제는 어떤 이유로든 JavaScript가 작동하지 않는 경우(예: RSS 피드에서) <tt><pre class="brush:php;toolbar:false"></tt> 태그만큼 좋아 보이지 않는다는 것입니다. </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="code" style="PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; MARGIN-LEFT: 2em; BORDER-LEFT: #ccc 3px solid; PADDING-TOP: 0.5em"><textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>
로그인 후 복사

확장 구성

몇 가지 구성 옵션을 코드 블록에 전달하는 방법이 있습니다. 콜론으로 구분된 인수를 통해 수행됩니다.

<pre name="code" class="html:collapse">
... some code here ...
로그인 후 복사

실현

마지막으로 페이지에 모든 것이 제대로 렌더링되도록 하려면 페이지에 JavaScript를 추가해야 합니다.

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
로그인 후 복사

최적의 결과를 얻으려면 이 코드를 페이지 맨 끝에 배치하세요. 해당 기능에 대한 자세한 내용은 HighlightAll을 확인하세요.

下载地址:SyntaxHighlighter_1.5.0.zip

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿