Skip to content

How to add code block

1. ๐Ÿงฑ ์ฝ”๋“œ๋ธ”๋ก์ด๋ž€?

์‹œ๊ฐ์  ์Šคํฌ๋ฆฝํŒ… ํ™˜๊ฒฝ ๋‚ด์˜ ๋ฌธ์ž ์Šคํฌ๋ฆฝํŒ… ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งํ•œ๋‹ค.

1-1. ์ฝ”๋“œ๋ธ”๋ก์˜ ์žฅ์ 

  1. ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐœ๋…์„ ์„ค๋ช…ํ•˜๊ฑฐ๋‚˜, ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž์™€ ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•˜๊ฑฐ๋‚˜, ๊ณ ์œ ํ•œ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์œ ์ง€ยท๊ด€๋ฆฌํ•˜๋Š”๋ฐ ์œ ์šฉํ•˜๋‹ค.
  2. ๋งŽ์€ ์–‘์˜ ์ฝ”๋“œ๋ฅผ ํด๋ฆฝ๋ณด๋“œ์— ๊ฐ„ํŽธํ•˜๊ฒŒ ๋ณต์‚ฌํ•œ ๋’ค ์›ํ•˜๋Š” ๊ณณ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

2. html์—์„œ ์ฝ”๋“œ๋ธ”๋ก ์ถ”๊ฐ€ํ•˜๊ธฐ

๋‹ค์Œ 2๊ฐ€์ง€ ๋ฐฉ๋ฒ•์œผ๋กœ html์— ์ฝ”๋“œ๋ธ”๋ก์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค.

2-1. code ํƒœ๊ทธ์™€ ๊ทธ ๋‚ด์šฉ์„ pre ํƒœ๊ทธ ์•ˆ์— ๋ž˜ํ•‘ํ•˜๊ธฐ

<pre>
    <code>
        print(hellow world);
    </code>
</pre>

2-2. code ํƒœ๊ทธ์™€ CSS white-space ์†์„ฑ ์‚ฌ์šฉํ•˜๊ธฐ

<code class="test">
    print("hellow world");
</code>
.test {
  display: block;
  white-space: pre-wrap;
}

3. markdown์—์„œ ์ฝ”๋“œ๋ธ”๋ก ์ถ”๊ฐ€ํ•˜๊ธฐ

๋ฐฑํ‹ฑ(`)์„ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ”๋“œ๋ธ”๋ก ์ž‘์„ฑํ•˜๊ธฐ

4. Github gist ์ด์šฉํ•˜๊ธฐ

  1. Github์— ์ ‘์†ํ•ด์„œ ์šฐ์ธก ์ƒ๋‹จ์— '+' ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅธ ๋’ค new gist๋ฅผ ํด๋ฆญํ•œ๋‹ค.
  2. ์ž‘์„ฑํ•˜๊ณ ์ž ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜๊ณ  create public gist๋กœ ์ €์žฅํ•œ๋‹ค.
  3. ์ €์žฅ ์‹œ ์šฐ์ธก ์ƒ๋‹จ์— ๋ณด์ด๋Š” Embeded ๋ถ€๋ถ„์—์„œ ๋ณต์‚ฌ๋ฅผ ํด๋ฆญ ํ›„ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ ์ž ํ•˜๋Š” ๋ถ€๋ถ„์— ๋ถ™์—ฌ๋„ฃ๋Š”๋‹ค.

ํ•ด๋‹น ๋‚ด์šฉ์— ๋Œ€ํ•ด ๋” ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด...