Js-beautify: HTML Beautify: YAML ๋จธ๋ฆฌ๋ง ํ˜•์‹์„ ์ง€์ •ํ•˜์ง€ ์•Š์Œ

์— ๋งŒ๋“  2014๋…„ 08์›” 15์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: beautify-web/js-beautify

Assemble , Middleman ๋˜๋Š” Jekyll๊ณผ ๊ฐ™์€ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ๊ธฐ๋Š” ํ…œํ”Œ๋ฆฟ ์ƒ๋‹จ์—์„œ YAML ๋จธ๋ฆฌ๋ง์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ํ…œํ”Œ๋ฆฟ์—์„œ html beautify๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ์•ž๋ถ€๋ถ„์ด ์—‰๋ง์ด ๋ฉ๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ์ด yaml ๋จธ๋ฆฌ๋ง:

title: Test
is-test: true

---

๋‹ค์Œ์œผ๋กœ ๋ณ€ํ™˜:

--- title: Test is-test: true ---

์„ธ ๊ฐœ์˜ ๋Œ€์‹œ ์‚ฌ์ด์— "๊ฐ๊ฒจ์ง„" ๋ชจ๋“  ๊ฒƒ์„ ๋ฌด์‹œํ•˜๊ฑฐ๋‚˜ ์ถ”๊ฐ€ ์˜ต์…˜์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

์ถ”๊ฐ€ ์ •๋ณด: http://assemble.io/docs/YAML.html ๋˜๋Š” http://middlemanapp.com/basics/frontmatter/

html templating fixed?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‚˜๋Š” beautifier๊ฐ€ preservenewlines ์™€ ๊ฐ™์€ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๊ฐ€์ ธ์•ผ ํ•œ๋‹ค๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค. ์ด๋ฏธ ์žˆ๋Š” ๊ฒฝ์šฐ ํ…์ŠคํŠธ์˜ ์ƒˆ ์ค„์„ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค. ์•ž์˜ ๋ฌธ์ œ๋งŒ์€ ์•„๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด HTML ์ฝ”๋“œ๊ฐ€ ์žˆ๊ณ  ์ผ๋ถ€ ์‚ฌ๋žŒ๋“ค์€ VS Code์—์„œ ์ž‘์—…ํ•˜๊ณ  ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์€ ์„œ๋ฒ„์˜ MidnightCommander์—์„œ ๋ฐ”๋กœ ์ž‘์—…ํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋ชจ๋“  ํ…์ŠคํŠธ๊ฐ€ ์ด์™€ ๊ฐ™์€ ํ˜•์‹์œผ๋กœ ์ง€์ •๋˜๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค.

<p>
    This is multiple
    line text, that is
    easy to read in 
    MC
</p>

์ด๊ฒƒ์€ HTML์ด ๋ Œ๋”๋ง๋˜๊ณ  MC์—์„œ๋„ ๋ณผ ์ˆ˜ ์žˆ์„ ๋•Œ ๋ฐ”๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ beautifier๋กœ ํฌ๋งทํ•˜๋ฉด ์ด๊ฒƒ์€ ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ํ…์ŠคํŠธ์˜ ์ƒˆ ์ค„์„ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  5 ๋Œ“๊ธ€

์‚ฌ๋žŒ๋“ค์ด js, html ๋ฐ css์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ํ…œํ”Œ๋ฆฟ ์‹œ์Šคํ…œ์ด ๋„ˆ๋ฌด ๋งŽ์Šต๋‹ˆ๋‹ค.
@einars , @evocateur ๋‹น์‹ ์€ ๋ฏธํ™”๋ฅผ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์—ฌ๋ถ€(๋˜๋Š” ์–ด๋–ป๊ฒŒ)์— ๋Œ€ํ•œ ์ƒ๊ฐ/์˜๊ฒฌ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋Š” ์ด ๋ชจ๋“  ๊ฒƒ์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ๋ชจ๋“  ํ•ต์‹ฌ ์ฝ”๋“œ์— ํŠน๋ณ„ํ•œ ๊ฒฝ์šฐ๋ฅผ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ฐ•๋ ฅํ•œ AST ํŒŒ์„œ(์˜ˆ: Esprima )๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ทน์ ์œผ๋กœ ๋ฆฌํŒฉํ† ๋งํ•˜๊ณ  ์ด๋Ÿฌํ•œ AST๋ฅผ ์‚ฌ์šฉ์ž ์ •์˜ํ•  ์ˆ˜ ์žˆ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ œ๊ณตํ•˜์—ฌ Python ๋ฒ„์ „์„ ํฌ๊ธฐํ•˜๋Š” ๊ฒƒ ์™ธ์—๋Š” ์ด๋Ÿฐ ์ผ์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. (๊ทธ๋ฆฌ๊ณ  escodegen๊ณผ ๊ฐ™์€ ๊ฑฐ์˜ ๋ชจ๋“  AST ์ฝ”๋“œ ์ƒ์„ฑ๊ธฐ๋Š” ์‚ฌ์šฉ์ž ์ •์˜ํ•˜๊ธฐ ๋งค์šฐ ์–ด๋ ค์šด ์ถœ๋ ฅ์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.)

์ข€ ๋” ์ง์„ค์ ์œผ๋กœ ๋งํ•˜์ž๋ฉด, ์ด ํ”„๋กœ์ ํŠธ๋Š” JS๋ฅผ ์•„๋ฆ„๋‹ต๊ฒŒ ํ•˜๋Š” ๊ฒƒ ์ด์ƒ์„ ํ•ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค. HTML๊ณผ CSS๋ฅผ ์ƒ๋žตํ–ˆ์ง€๋งŒ ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ•ด์•ผ ํ•œ๋‹ค๋ฉด CSS์™€ HTML๋งŒ ์•„๋ฆ„๋‹ต๊ฒŒ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ์‚ฌ์ „ ๋ฐ ์‚ฌํ›„ ํ”„๋กœ์„ธ์„œ์˜ ์ž˜๋ชป๋œ ๊ตฌ๋ฌธ "์„คํƒ•"์„ ํ—ˆ์šฉํ•˜๋„๋ก ์ •์  ํŒŒ์„œ๋ฅผ ์™œ๊ณกํ•˜๋ ค๋Š” ์‹œ๋„๋Š” ์‹œ๊ฐ„ ๋‚ญ๋น„์ ์ธ ์–ด๋ฆฌ์„์Œ์ž…๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” YAML์ด๋‚˜ Markdown/LESS/SASS/React/Go/Ruby/Brainfuck์„ ๋ฏธํ™”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊นŒ๋‹ค๋กœ์›€์€ ์ œ์ณ๋‘๊ณ , ์šฐ๋ฆฌ์˜ ์ด์ƒํ•˜๊ณ  ์•„๋ฆ„๋‹ค์šด ํ”„๋ก ํŠธ ์—”๋“œ ์žฅ์ธ ์ปค๋ฎค๋‹ˆํ‹ฐ๊ฐ€ ๊ฟˆ๊พธ๋Š” ๋ชจ๋“  ์ด์ƒํ•œ ๋ฉ”ํƒ€ ๊ตฌ๋ฌธ ์—ด๋ณ‘์„ ์ง€์›ํ•˜๋Š” ์ž ์‹ํ•˜๋Š” ๋ณต์žก์„ฑ์€ ๋‹จ์ง€ ์–ด๋ฆฌ์„์€ ์ผ์ž…๋‹ˆ๋‹ค. ์˜ค๋Š˜๋‚ ์—๋Š” AST ๊ฐ๋„๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ์‹œ๋„ํ•˜๋Š” ๋‹ค๋ฅธ ๋ฏธํ™”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค(ํ”Œ๋Ÿฌ๊ทธ์ธ API๊ฐ€ ์กด์žฌํ•˜๋”๋ผ๋„ ๋งค์šฐ ๋ฏธ์„ฑ์ˆ™ํ•œ ๊ฒฝํ–ฅ์ด ์žˆ์Œ).

๋งค์šฐ ํ•ฉ๋ฆฌ์ ์ž…๋‹ˆ๋‹ค. "beautifier๋Š” ๋ฒ”์šฉ ํฌ๋งทํ„ฐ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค"์™€ ๊ฐ™์€ ์›๋ฆฌ์ž…๋‹ˆ๋‹ค.

js beautifier๋Š” ๋‹ค๋ฅธ beautifier ์•ˆ์— ๋ž˜ํ•‘ํ•˜๊ธฐ ์œ„ํ•œ ์‰ฌ์šด API๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์ด ๋ฐ”๋กœ html beautifier๊ฐ€ ํ•˜๋Š” ์ผ์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋งŒ๋‚˜๋ฉด html beautifier๊ฐ€ ์ œ์–ด๋ฅผ js beautifier์— ๋„˜๊ธด ๋‹ค์Œ ์ถœ๋ ฅ์„ ํ†ตํ•ฉํ•ฉ๋‹ˆ๋‹ค. ์‚ฌ๋žŒ๋“ค์€ ์ด ํ”„๋กœ์ ํŠธ์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋žฉํ•‘ํ•˜๊ฑฐ๋‚˜ ์ˆ˜์ •ํ•˜์—ฌ ์ž์‹ ๋งŒ์˜ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ๋žŒ๋“ค์ด ๊ด€์‹ฌ์„ ๊ฐ–๊ณ  ์ฑ…์ž„์„ ์ง€๊ณ /๊ณต์œ ํ•  ์˜ํ–ฅ์ด ์žˆ๋‹ค๋ฉด ํ”„๋กœ์ ํŠธ๋ฅผ beautify-web์˜ ์ผ๋ถ€๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹จ๊ธฐ์ ์œผ๋กœ๋Š” html, css ๋ฐ javascript ์™ธ๋ถ€์— ๊ธฐ๋ฐ˜ํ•œ ๋ฒ„๊ทธ ์š”์ฒญ์„ ํ‘œ์‹œํ•˜๊ธฐ ์‹œ์ž‘ํ•œ ๋‹ค์Œ ๊ฑฐ๊ธฐ์—์„œ ์–ด๋””๋กœ ๊ฐˆ์ง€ ๊ฒฐ์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” beautifier๊ฐ€ preservenewlines ์™€ ๊ฐ™์€ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๊ฐ€์ ธ์•ผ ํ•œ๋‹ค๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค. ์ด๋ฏธ ์žˆ๋Š” ๊ฒฝ์šฐ ํ…์ŠคํŠธ์˜ ์ƒˆ ์ค„์„ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค. ์•ž์˜ ๋ฌธ์ œ๋งŒ์€ ์•„๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด HTML ์ฝ”๋“œ๊ฐ€ ์žˆ๊ณ  ์ผ๋ถ€ ์‚ฌ๋žŒ๋“ค์€ VS Code์—์„œ ์ž‘์—…ํ•˜๊ณ  ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์€ ์„œ๋ฒ„์˜ MidnightCommander์—์„œ ๋ฐ”๋กœ ์ž‘์—…ํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋ชจ๋“  ํ…์ŠคํŠธ๊ฐ€ ์ด์™€ ๊ฐ™์€ ํ˜•์‹์œผ๋กœ ์ง€์ •๋˜๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค.

<p>
    This is multiple
    line text, that is
    easy to read in 
    MC
</p>

์ด๊ฒƒ์€ HTML์ด ๋ Œ๋”๋ง๋˜๊ณ  MC์—์„œ๋„ ๋ณผ ์ˆ˜ ์žˆ์„ ๋•Œ ๋ฐ”๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ beautifier๋กœ ํฌ๋งทํ•˜๋ฉด ์ด๊ฒƒ์€ ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ํ…์ŠคํŠธ์˜ ์ƒˆ ์ค„์„ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ์ด๊ฒƒ์ด ํ•ด๊ฒฐ๋˜์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ํ…Œ์ŠคํŠธ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰