Ace: ์ž˜๋ชป๋œ ์œ„์น˜์˜ ์—์ด์Šค ๋งˆ์ปค

์— ๋งŒ๋“  2014๋…„ 09์›” 05์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: ajaxorg/ace

์•ˆ๋…•ํ•˜์„ธ์š”

ace 1.1.5๋ฅผ ์‚ฌ์šฉ ์ค‘์ด๊ณ  ๋งˆ์ปค๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ฐ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์ผ๋ถ€ ํ–‰์„ ๊ฐ•์กฐ ํ‘œ์‹œํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด ๋‹ค์Œ ์ฝ”๋“œ๋กœ ๋งˆ์ปค๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

var range = new Range(4, 1, 8, 1);
var marker = $scope.editor.getSession().addMarker(range, "ace-related-code-highlight", "line");

๋‚ด ์Šคํƒ€์ผ์€:

.ace-related-code-highlight {
     background-color: yellow;
}

๊ทธ๋Ÿฌ๋‚˜ ace๋Š” ์ฒซ ๋ฒˆ์งธ ํ–‰ s๋ฅผ ๊ฐ•์กฐ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค. ์—์ด์Šค1.png. ๋™์ผํ•œ ๋ฒ”์œ„์˜ ๋˜‘๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ํŠธ๋ฆฌ๊ฑฐํ•˜๋ฉด ๋‹ค์Œ ํ–‰์ด ๊ฐ•์กฐ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ์—์ด์Šค2.png

๋‚˜๋Š” ๊ทธ๊ฐ€ ํ•ญ์ƒ ๋ฒ”์œ„์˜ highgt๋ฅผ ์กด์ค‘ํ•˜์ง€๋งŒ ์ •์ƒ์—์„œ ์‹œ์ž‘ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜์Šต๋‹ˆ๋‹ค. ์œ„์˜ ์˜ˆ์—์„œ ๊ทธ๋Š” 1-5ํ–‰์„ ๊ฐ•์กฐ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค. ๋‘ ๋ฒˆ์งธ ํด๋ฆญ 5-10 ๋“ฑ.
๊ทธ๋Ÿฌ๋‚˜ ์Šคํฌ๋กคํ•˜๋ฉด ๋ฒ”์œ„๊ฐ€ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค. ๋•Œ๋กœ๋Š” 11ํ–‰์ด ํ‘œ์‹œ๋˜๊ณ  ๋•Œ๋กœ๋Š” 10ํ–‰์ด ์ ˆ๋ฐ˜๋งŒ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.
์—์ด์Šค๊ฐ€ ์˜ฌ๋ฐ”๋ฅธ ์„ ์„ ์ฐพ๋Š” ๋ฐ ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๊นŒ?

๋˜ํ•œ ์–ธ์  ๊ฐ€ ์Šคํฌ๋กคํ•  ๋•Œ ๋ Œ๋”๋ง ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ „์ฒด ๋ผ์ธ์ด ์•„๋‹ˆ๋ผ ์™ผ์ชฝ ๋ถ€๋ถ„๋งŒ ๋…ธ๋ž€์ƒ‰์ž…๋‹ˆ๋‹ค s.ace3.png

๋‚ด๊ฐ€ ๋ญ˜ ์ž˜๋ชปํ•˜๊ณ  ์žˆ๋Š”์ง€์— ๋Œ€ํ•œ ์กฐ์–ธ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

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

position:absolute; ๋ฅผ .ace-related-code-highlight ๊ทœ์น™์— ์ถ”๊ฐ€

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

position:absolute; ๋ฅผ .ace-related-code-highlight ๊ทœ์น™์— ์ถ”๊ฐ€

๋„์›€์„ ์š”์ฒญํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๊ฒƒ์„ ๊ฐœ์„ ํ–ˆ๋‹ค

ํ•˜์ง€๋งŒ

ํ˜ธ์ถœํ•  ๋•Œ

var ๋ฒ”์œ„ = ์ƒˆ๋กœ์šด ๋ฒ”์œ„(5, 0, 10, 0);
var marker = $scope.editor.getSession().addMarker(range, "ace-related-code-highlight", "fullLine", false);

๊ทธ๊ฒƒ์€ 6-11 ํ–‰์„ ๊ฐ•์กฐ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค. API๋ฅผ ์ž˜๋ชป ์ดํ•ดํ•ฉ๋‹ˆ๊นŒ?

์˜ˆ, ๋ผ์ธ ์ธ๋ฑ์Šค๋Š” 0์—์„œ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ž˜, ๋‚ด ๋‚˜์œ thx

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