마카로닉스

2077 No
syntaxhighlighter 사용법

2023-03-16 13:27:29 By 라이트 0 794 댓글수 4 포스트 하기
4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.1/assets/css/shCore.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.1/assets/css/shThemeOT.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shCore.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shAutoloader.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushAppleScript.js" type="text/javascript"></script>	
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushAS3.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushBash.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushColdFusion.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushCpp.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushCSharp.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushCss.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushDelphi.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushDiff.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushErlang.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushGroovy.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushJava.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushJavaFX.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushJScript.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushPerl.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushPhp.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushPlain.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushPowerShell.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushPython.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushRuby.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushSass.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushScala.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushSql.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushVb.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shBrushXml.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/include/lib/syntaxhighlighter/shLegacy.js" type="text/javascript"></script>
    <style>
    .syntaxhighlighter {
        max-height: 300px;
        max-width: 1600px;
        overflow: scroll;
    }
    
    .syntaxhighlighter .gutter {
        top: 0px !important;
        position: relative !important;
        height: 300px !important;
    }
    
    .syntaxhighlighter table td.code .line {
        padding: 0.15em 0.5em 0.15em 1em !important;
    }
    
    .syntaxhighlighter table td.gutter .line {
        padding: 0.15em 0.5em 0.15em 1.5em !important;
    }
    
    .syntaxhighlighter table td.code .container {
        position: relative !important;
        max-height: 300px;
        overflow: scroll !important;
    }
    
    .syntaxhighlighter table td.gutter .line {
        padding-left: 10px !important;
        padding-right: 34px !important;
        padding-top: 2.1px !important;
        padding-bottom: 2.1px !important;
    }
    
    .xml {
        font-size: 14px !important;
    }
    </style>
    <script>
          SyntaxHighlighter.config.space = " ";
          SyntaxHighlighter.defaults["gutter"] = true;
          SyntaxHighlighter.defaults["toolbar"] = true;
          SyntaxHighlighter.all();
    </script>
  </head>
  <body>
    <button type="button" class="btn btn-sm btn-success" style="margin-left: 20px" onclick="copyToClipBoard()">코드 복사</button>
    <textarea id="copyContent" style="width: 0; height: 0; resize: none; border: none;"> 코드 삽입</textarea>
    <pre class="brush:xml">

      
        <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
            </head>
            <body>
                코드 삽입
            </body>
            </html>
       
    </pre>

    <script>
      function copyToClipBoard() {
        var content = document.getElementById("copyContent");
        content.select();
        document.execCommand("copy");
        alert("복사되었습니다.");
      }
    </script>
  </body>
</html>