{{htmlmetatags>
metatag-description=(도쿠위키, DokuWiki, 위키, Wiki, 플러그인, 커스터마이징, 오픈 소스, Open Source, 검색어 하이라이트)
metatag-og:description=(도쿠위키, DokuWiki, 위키, Wiki, 플러그인, 커스터마이징, 오픈 소스, Open Source, 검색어 하이라이트)
}}

====== Search Highlighter ======
===== 기능 설명 =====
  * 검색어 하이라이트 시 플러그인에서 생성한 태그와 충돌이 나는 경우가 발생함
  * 검색어 하이라이트 처리를 백엔드 대신에 프론트엔드에서 하도록 커스터마이징

===== 커스터마이징 =====
<sxh php; gutter: true; first-line: 276; highlight: [308]; title: inc/html.php;>
function html_show($txt=null){
    global $ID;
    global $REV;
    global $HIGH;
    global $INFO;
    global $DATE_AT;
    //disable section editing for old revisions or in preview
    if($txt || $REV){
        $secedit = false;
    }else{
        $secedit = true;
    }

    if (!is_null($txt)){
        //PreviewHeader
        echo '<br id="scroll__here" />';
        echo p_locale_xhtml('preview');
        echo '<div class="preview"><div class="pad">';
        $html = html_secedit(p_render('xhtml',p_get_instructions($txt),$info),$secedit);
        if($INFO['prependTOC']) $html = tpl_toc(true).$html;
        echo $html;
        echo '<div class="clearer"></div>';
        echo '</div></div>';

    }else{
        if ($REV||$DATE_AT){
            $data = array('rev' => &$REV, 'date_at' => &$DATE_AT);
            Event::createAndTrigger('HTML_SHOWREV_OUTPUT', $data, 'html_showrev');
        }
        $html = p_wiki_xhtml($ID,$REV,true,$DATE_AT);
        $html = html_secedit($html,$secedit);
        if($INFO['prependTOC']) $html = tpl_toc(true).$html;
        //$html = html_hilight($html,$HIGH);
        echo $html;
    }
}
</sxh>

<sxh javascript; gutter: true; highlight: [1-78]; title: conf/userscript.js;>
jQuery(function() {
	// 검색어 파라미터
	var phrases = [];
	var search = window.location.search;
	if (search) {
		var params = search.substring(1).split('&');
		for (var i = 0; i < params.length; i++) {
			var pair = params[i].split('=');
			var key = decodeURIComponent(pair[0]);
			if (key === 's[]' && pair[1]) {
				var value = decodeURIComponent(pair[1].replace(/\+/g, ' '));
				phrases.push(value);
			}
		}
	}
	if (phrases.length === 0) return;

	// 검색어 정규식
	var escaped = [];
	for (var j = 0; j < phrases.length; j++) {
		escaped.push(phrases[j].replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'));
	}
	var regex = new RegExp('(' + escaped.join('|') + ')', 'gi');

	// 제외 리스트
	var exclude_list = [
		'div.syntaxhighlighter'					// SyntaxHighlighter4 Plugin
		, '[id^="plant-uml-diagram-"]'			// PlantUML Parser Plugin
		, 'div.tags span a'						// Tag Plugin
	];
	var exclude_selector = exclude_list.join(', ');

	// 허용 리스트
	var allow_list = [
		'br', 'wbr'
		, 'header', 'footer'
		, 'main', 'section', 'article', 'aside'
		, 'nav', 'address'
		, 'div', 'p', 'span'
		, 'hgroup', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
		, 'ul', 'ol', 'li', 'dl', 'dt', 'dd'
		, 'menu', 'label', 'hr'
		, 'table', 'thead', 'tbody', 'tfoot', 'th', 'tr', 'td', 'caption'
		, 'a', 'b', 'i', 'q', 's', 'u'
		, 'blockquote', 'figure', 'figcaption', 'details', 'summary'
		, 'abbr', 'cite', 'code', 'data', 'del', 'dfn', 'em', 'ins', 'kbd', 'mark', 'samp', 'small', 'strong', 'sub', 'sup', 'time', 'var'
		, 'ruby', 'rp', 'rt', 'bdo', 'bdi'
		, 'acronym', 'big', 'center', 'dir', 'font', 'marquee', 'nobr', 'plaintext', 'rb', 'rbc', 'rtc', 'selectedcontent', 'strike', 'tt', 'xmp'
	];

	// 하이라이트 함수
	function html_hilight($node) {
		$node.contents().each(function() {
			var node = this;
			if (node.nodeType === 3) {
				var txt = node.nodeValue;
				if (regex.test(txt)) {
					regex.lastIndex = 0;
					jQuery(node).replaceWith(txt.replace(regex, '<span class="search_hit">$1</span>'));
				}
			} else if (node.nodeType === 1) {
				var $this = jQuery(node);
				if (!$this.is(exclude_selector)) {
					var tag = node.tagName.toLowerCase();
					if (allow_list.indexOf(tag) !== -1) {
						html_hilight($this);
					}
				}
			}
		});
	}

	// 하이라이트 함수 실행
	var $target = jQuery("div.page.group");
	if ($target.length > 0) {
		html_hilight($target);
	}
});
</sxh>

===== 플러그인 제작 시 =====
  * 기능 사용 여부 설정
  * 하이라이트 색상 선택
  * 하이라이트 제외 플러그인 선택
    * SyntaxHighlighter4 Plugin
    * PlantUML Parser Plugin
    * Tag Plugin

{{tag>"도쿠위키" "DokuWiki"}}