microlight.js - 독특한 단색 코드 강조

문법 강조계의 이단아!! (아.. 너무 올드한 소개 멘트네요..)

 

적용 예시

 

암튼, highlight.js 및 여러 코드 문법 강조 라이브러리들과는 많이 다른!

마이크로라이트! microlight.js 를 소개합니다.

 

색상은 단색으로 하지만 그림자와 투명도를 이용해 키워드들만 눈에 잘 보이게 강조해줍니다.

 

코드 언어도 지정해줄 필요 없이 왠만해선 다 알아서 중요 단어들만 강조해줍니다.

그래서 여러 언어가 섞여 있어도 됩니다.

 

사이트의 디자인 테마에 따라 이런 단색 강조도 필요할 때가 있을 것 같네요.

 

소스도 엄청 가볍고 CSS도 딱히 필요 없습니다.

 

제작자 홈: http://asvd.github.io/microlight/

microlight.js (2.2k)

기본 사용법:

아래 소스를 페이지 어딘가에 아무대나 추가해주고 하이라이트 적용을 원하는 블럭에 (보통 <pre> 나 <code> 나 <div> 가 되겠죠?) class=microlight 만 넣어 주면 끝!

 

<script>
!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("undefined"!=typeof exports?exports:e.microlight={})}(this,function(e){var t,i=window,n=document,o="appendChild",r="test",a=";text-shadow:",l="opacity:.",s=" 0px 0px ",c="3px 0px 5",d=")",u=n.getElementsByClassName("microlight"),f=function(e){for(e=0;t=u[e++];)for(var f,p,h,g,m,y=t.textContent,x=0,b=y[0],w=1,v=t.innerHTML="",k=0,C=/(\d*\, \d*\, \d*)(, ([.\d]*))?/g.exec(i.getComputedStyle(t).color),N="px rgba("+C[1]+",",E=C[3]||1;p=f,f=7>k&&"\\"==f?1:w;){if(w=b,b=y[++x],g=v.length>1,!w||k>8&&"\n"==w||[/\S/[r](w),1,1,!/[$\w]/[r](w),("/"==f||"\n"==f)&&g,'"'==f&&g,"'"==f&&g,y[x-4]+p+f=="-->",p+f=="*/"][k])for(v&&(t[o](m=n.createElement("span")).setAttribute("style",["",a+s+9+N+.7*E+"),"+s+2+N+.4*E+d,l+6+a+s+7+N+E/4+"),"+s+3+N+E/4+d,l+7+a+c+N+E/5+"),-"+c+N+E/5+d,"font-style:italic;"+l+5+a+c+N+E/4+"),-"+c+N+E/4+d][k?3>k?2:k>6?4:k>3?3:+/^(a(bstract|lias|nd|rguments|rray|s(m|sert)?|uto)|b(ase|egin|ool(ean)?|reak|yte)|c(ase|atch|har|hecked|lass|lone|ompl|onst|ontinue)|de(bugger|cimal|clare|f(ault|er)?|init|l(egate|ete)?)|do|double|e(cho|ls?if|lse(if)?|nd|nsure|num|vent|x(cept|ec|p(licit|ort)|te(nds|nsion|rn)))|f(allthrough|alse|inal(ly)?|ixed|loat|or(each)?|riend|rom|unc(tion)?)|global|goto|guard|i(f|mp(lements|licit|ort)|n(it|clude(_once)?|line|out|stanceof|t(erface|ernal)?)?|s)|l(ambda|et|ock|ong)|m(icrolight|odule|utable)|NaN|n(amespace|ative|ext|ew|il|ot|ull)|o(bject|perator|r|ut|verride)|p(ackage|arams|rivate|rotected|rotocol|ublic)|r(aise|e(adonly|do|f|gister|peat|quire(_once)?|scue|strict|try|turn))|s(byte|ealed|elf|hort|igned|izeof|tatic|tring|truct|ubscript|uper|ynchronized|witch)|t(emplate|hen|his|hrows?|ransient|rue|ry|ype(alias|def|id|name|of))|u(n(checked|def(ined)?|ion|less|signed|til)|se|sing)|v(ar|irtual|oid|olatile)|w(char_t|hen|here|hile|ith)|xor|yield)$/[r](v):0]),m[o](n.createTextNode(v))),h=k&&7>k?k:h,v="",k=11;![1,/[\/{}[(\-+*=<>:;|\\.,?!&@~]/[r](w),/[\])]/[r](w),/[$\w]/[r](w),"/"==w&&2>h&&"<"!=f,'"'==w,"'"==w,w+b+y[x+1]+y[x+2]=="<!--",w+b=="/*",w+b=="//","#"==w][--k];);v+=w}};e.reset=f,"complete"==n.readyState?f():i.addEventListener("load",f,0)});
</script>

 

색상변경이 필요하다면 아래처럼 스타일을 잡아주면 됩니다.

.microlight {
font-family : monospace;
white-space : pre;
background-color : #C4E4E8;
color            : #052C36;    
}

 

추가 사용법:

microlight.reset(); 명령은 하이라이트를 갱신(해제했다가 다시 적용)하는 기능입니다.
(하이라이트 적용 후 코드 내용이 바뀌어서 다시 적용 할 때나 수동으로 적용할 때 사용)

 

microlight.reset("클래스명"); 은 클래스명을 microlight가 아닌 다른 것으로 지정해야 하는 경우 씁니다.