How to add codebox in Blogger post

 This is from https://www.techyleaf.in/add-code-box-in-blogger-post/ .

Step 1: copy and paste the following into the HTML of the post. 

<pre style="background: rgb(238, 238, 238); border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: initial; border-left-style: initial; border-radius: 10px; border-right-color: initial; border-right-style: initial; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-width: 5px 0px 0px; color: #444444; font-family: &quot;Courier New&quot;, Courier, monospace; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 12px; vertical-align: baseline;"><span style="font-size: 13px;">Replace the text with codes</span></pre><p>Start write the next paragraph here </p>

Step 2: Copy/Edit in the Compose View of the post 

This adds codebox. However, it is rather cumbersome. Better method? 

수식 쓰기 테스트

블로그에서 수식을 쓰기 테스트

각 포스트를 작성할 때, HTML 모드로 들어가서

글의 맨 위쪽에 다음과 같은 스크립트를 추가한다. 

(비슷한 스크립트를 제공하는 곳이 많이 있는 것 같다.)

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js"> MathJax.Hub.Config({ extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"], jax: ["input/TeX", "output/HTML-CSS"], tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], }, "HTML-CSS": { availableFonts: ["TeX"] } }); </script>

스크립트가 추가된 다음부터는 html 에디트에서 $ 를 이용하여 수식 모드로 들어 갈 수 있다.

$$\int_0^1 dx f(x)$$