Menu

Thursday, February 27, 2020

[Blogger][แก้ไขเพิ่มเติม] การทำ Code Snippet สำหรับ Blogger ที่เป็น HTTPS
[Blogger][Updated] How to Make Code Snippet for Blogger (HTTPS version)

จากโพสต์ [Blogger] การทำ code snippet สำหรับ Blogger ที่เป็น HTTPS ที่เรียกใช้ resource จาก https://agorbatchev.typepad.com ปรากฏว่า เมื่อเวลาผ่านไป มีบาง resource ที่ไม่สามารถเรียกใช้ได้ เช่น shThemeDefault.css เป็นต้น

เราจึงนำไฟล์ resource ทั้งหมดที่จำเป็นต้องใช้ไปไว้ที่ GitHub แล้วทำการเปิด GitHub Pages สำหรับ repository นี้

หลังจากนั้นแก้ไขการเรียกใช้ resource จาก GitHub แทนดังนี้
  1. เข้าไปที่ Theme 
  2. กดปุ่ม Edit HTML ภายใต้ Live on Blog
  3. Copy script ด้านล่างไปใส่ไว้ในส่วนของ head ของ theme
  4. <link href='https://arzeroid.github.io/syntaxhighlighter_css_js/css/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='https://arzeroid.github.io/syntaxhighlighter_css_js/css/shThemeDefault.css' rel='stylesheet' type='text/css'/>
     
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shCore.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushBash.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushCpp.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushCSharp.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushCss.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushJava.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushJScript.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushPlain.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushPhp.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushPython.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushRuby.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushSql.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushVb.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushXml.js' type='text/javascript'/>
    <script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushPerl.js' type='text/javascript'/>
    <script language='javascript'>
        SyntaxHighlighter.config.bloggerMode = true;    
        SyntaxHighlighter.all();
    </script>
    
  5. กดปุ่ม Save theme
  6. ใส่ code ตามด้านล่างในส่วนของ HTML ของ Post
  7. <pre class="brush: html">
        <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
        <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    </pre>
    
หมายเหตุ: เราไม่จำเป็นต้องใส่ brush ทุกอันในข้อ 3 สามารถเลือกเฉพาะอันที่ใช้เท่านั้นได้ สำหรับ brush เพิ่มเติม สามารถดูได้จาก http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

No comments:

Post a Comment