ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 티스토리에 코드 넣기(SyntaxHighlighter)
    개발/C++ 2019. 11. 28. 18:26

    검색해보면 작동도 안 하는데 작동하는 것처럼 올린 글도 것도 있고 설명이 2% 부족한 것도 있다. 설명이 잘된 사이트가 있어 기록용으로 남긴다. SyntaxHighlighter라는 프로그램을 활용할 것이므로 아래에서 다운받는다.

    syntaxhighlighter_3.0.83.zip
    0.17MB

    압축을 풀면 우리에게 필요한 폴더는 scripts랑 styles. 티스토리 [스킨편집]에서 [html 편집]으로 들어가 두 폴더에 있는 파일들을 업로드한다. 업로드가 끝나면 html에 추가할 내용이 있다.

     

    1. 테마

    테마를 어둡게 하고 싶어 다음 코드를 <head></head> 사이에 넣었다. 이 문장은 위치가 상관 없는데 식별하기 좋도록</head> 바로 위에 넣었다. 테마는 stlyes 폴더에 있으며 어떤 모양새인지는 사이트에서 확인할 수 있다.

    <link rel="stylesheet" type="text/css" href="./images/shCoreRDark.css" />

     

    2. 언어

    언어마다 조금씩 다른 스타일을 적용하기 위해서 넣는 코드는 <body></body> 안에 있어야 하는데, </body> 바로 위에 있는 </s_t3> 위에 위치하면 된다.

    <!-- SyntaxHighlighter 시작 -->

    <script type="text/javascript" src="./images/shCore.js"></script>

    <script type="text/javascript" src="./images/shAutoloader.js"></script>

    <script type="text/javascript">

    //<![CDATA[

    SyntaxHighlighter.autoloader(

      'applescript            ./images/shBrushAppleScript.js',

      'actionscript3 as3      ./images/shBrushAS3.js',

      'bash shell             ./images/shBrushBash.js',

      'coldfusion cf          ./images/shBrushColdFusion.js',

      'cpp c                  ./images/shBrushCpp.js',

      'c# c-sharp csharp      ./images/shBrushCSharp.js',

      'css                    ./images/shBrushCss.js',

      'delphi pascal          ./images/shBrushDelphi.js',

      'diff patch pas         ./images/shBrushDiff.js',

      'erl erlang             ./images/shBrushErlang.js',

      'groovy                 ./images/shBrushGroovy.js',

      'java                   ./images/shBrushJava.js',

      'jfx javafx             ./images/shBrushJavaFX.js',

      'js jscript javascript  ./images/shBrushJScript.js',

      'perl pl                ./images/shBrushPerl.js',

      'php                    ./images/shBrushPhp.js',

      'text plain             ./images/shBrushPlain.js',

      'py python              ./images/shBrushPython.js',

      'ruby rails ror rb      ./images/shBrushRuby.js',

      'sass scss              ./images/shBrushSass.js',

      'scala                  ./images/shBrushScala.js',

      'sql                    ./images/shBrushSql.js',

      'vb vbnet               ./images/shBrushVb.js',

      'xml xhtml xslt html    ./images/shBrushXml.js'

    );

        // SyntaxHighlighter.config.bloggerMode = true;

        // SyntaxHighlighter.config.stripBrs = true;

        // SyntaxHighlighter.defaults['html-script'] = True;

        SyntaxHighlighter.all();

    //]]>   

    </script>

    <!-- SyntaxHighlighter 끝 -->

     

    </s_t3>

    </body>

     

    3. 사용법
    <pre class="brush:cpp">

    소스코드

    </pre>

    brush에 넣는 값은 일종의 별칭으로 두 번째 삽입한 코드를 보면 각 언어에 따른 별칭이 다르다. C++는 cpp나 c, 자바는 java, 파이썬은 py나 python 등이다. 소스에 있는 꺽쇠(>,<)는 &gt;과 &lt;로 바꿔야 하는데, 일일이 바꾸기엔 시간이 많이 걸리므로 자동으로 바꿔주는 사이트를 이용하면 된다.

     

    4. 테스트

    #include <cstdio>
    int main()
    {
    	printf("Hello F**king World\n");
    }
    

    출처:https://dis1.tistory.com/218

    댓글

Designed by Tistory.