[첫화면으로]사용자입력을그대로출력하기

마지막으로 [b]

사용자 입력을 그대로 출력하기

1. 개요
2. {{{ }}} 태그의 사용법 및 예문
2.1. 단순한 코드 출력
2.2. Syntax Highlighting

1. 개요

html 은 자신의 태그를 나타내는 방법으로 부등호쌍을 이용하기 때문에, 정작 사용자가 태그 자체 또는 다른 문자열이 들어 있는 부등호쌍을 출력하려고 할 때 웹브라우저가 그 부분을 html 태그로 인식하여 화면에 출력하지 않고 삼켜버리는 사태가 발생한다.

특히나 컴퓨터 프로그램의 코드 (UseModWiki 에서 사용하는 wiki.pl 을 비롯하여) 를 html 화일로 나타내기 위해서는 &, <, >, 등을 꼬박꼬박 &amp; &lt; &gt; 등으로 바꾸어줘야 한다. 이것은 귀찮은 일이기도 하거니와, 단 한 곳이라도 변환하는 것을 빼먹으면 그 코드는 동작하지 않는 에러투성이가 되고 만다.

설상가상으로, UseModWiki 에서는 사용자가 수작업으로 입력한 &amp; &lt; &gt; 를 친절하게도(!) 자동으로 &, <, > 으로 바꿔버리기 때문에, 위에서 언급한 변환을 이중으로 하여야 되는 문제가 있다. (즉, 화면에 &amp; 라고 출력하기 위해서는 실제로는 &amp;amp; 라고 입력해야 하는 것이다)

이 불편한 상황을 타개해보고자, MoinMoin 에서 지원하는 {{{ }}} 태그를 UseModWiki 에 비슷하게 구현해 보았다. 하는 김에, 겸사겸사 SyntaxHighlighting 도 지원하도록 해 보았다.

2. {{{ }}} 태그의 사용법 및 예문

2.1. 단순한 코드 출력

프로그램 코드 뿐 아니라, 고정폭 글꼴로 출력되길 바라는 곳에서도 사용가능하다.

 {{{
 html 태그에는 <br>, <hr> 등이 있다, < > & 를 화면에 표시하고 싶다면 &lt; &gt; &amp; 를 사용하라
 이 안에서는 <font color="red">어떠한 태그도 동작하지 않는다</font> 
 }}}

위와 같이 적으면 다음과 같이 출력된다.

 html 태그에는 <br>, <hr> 등이 있다, < > & 를 화면에 표시하고 싶다면 &lt; &gt; &amp; 를 사용하라
 이 안에서는 <font color="red">어떠한 태그도 동작하지 않는다</font>

이 때, {{{ 와 }}} 의 앞뒤에는 다른 문자가 있으면 안 된다. 즉 한 줄에 오직 {{{ 또는 }}} 만 있어야 된다. 예전처럼 :{{{ 와 같은 식으로 들여쓰기를 할 수 없지만, : 와 {{{ 를 연이은 줄에 적으면 된다.

위에서 보듯이, {{{ }}} 태그 사이에서는 부등호와 엠퍼센드를 맘대로 사용할 수 있다. 무조건 사용자가 입력한 그대로 나온다. html 태그 역시 거의 대부분 그대로 출력되나, <html>, </html> 등 일부 태그는 사용할 수 없다.

{{{ }}} 태그를 사용하면 태그 안의 내용을 <pre class="code">와 </pre> 태그 안에 넣어서 브라우저로 보내게 된다. 따라서 스타일쉬트에서 pre.code { } 내에 글꼴이나 배경색 등을 지정해 주면 된다.

(애초에는 pre 가 아니라 xmp 태그를 사용했는데, xmp 가 html 표준에서 제외되고 더 이상 사용하지 않는 것을 "강력히 권장"한다는 문구를 어디선가 보고는 바꿨음)

2.2. Syntax Highlighting

아래 기타 항목에 언급한 것처럼 UseModWiki소스수정/Vim플러그인이 있기 때문에 더 이상 지원하지 않습니다.

위에서 설명한 {{{ }}} 만으로도 불편함은 거의 없지만, C, Java 등의 프로그램 코드를 출력할 때 단색으로만 출력되는 것이 읽기가 힘들다. ViEditor 에서처럼 구문에 따라 색상이 지정되게 할 수 있다.

 {{{언어              {{{언어|옵션          {{{c|n4
 프로그램코드  또는   프로그램코드     예:  #include<stdio.h> 주저리주저리
 }}}                  }}}                   }}}

위와 같이 사용하면 SyntaxHighlighting 이 적용된다. 이 기능은 wiki.pl 에서 [GNU Souce-highlight]라는 별도의 유틸리티를 호출하게 하여 구현한다. 따라서 출력의 질은 이 유틸리티의 성능에 제약을 받는다.

다음은 C 와 Java 프로그램을 출력하는 예문이다. 부등호와 html 태그도 그대로 출력된다.
main(int argc, char * argv[])
{
	/* 주석문 */
	if (1) {
		printf("Hello, world<br>\n");
	}
}
class Hello {
	// 주석문
	public static void main(int Argc, String Argv[]) {
		System.out.println("Hello,world<br>\n");
	}
}

{{{언어 }}} 태그를 사용하면 태그 안의 내용을 <pre class="syntax">와 </pre> 태그 안에 넣어서 브라우저로 보내게 된다. 따라서 스타일쉬트에서 pre.syntax { } 내에 글꼴이나 배경색 등을 지정해 주면 된다.

기타

[GNU Souce-highlight] 1.8 에서 javascript 가 추가로 지원됩니다
-- Raymundo 2003-12-23 2:26 pm

source-highlight를 2.2로 업글했더니 출력 포맷이 바뀌어버려서... -_-;;; 현재 이 홈페이지에서 {{{#!vim perl }}} 로 출력한 곳들이 죄다 엉망으로 나오고 있음.. OTL
-- Raymundo 2006-3-11 10:19 pm

해결함
-- Raymundo 2006-3-26 4:32 pm

source-highlight 를 사용한 {{{언어 }}} 의 방식은, 외부 프로그램이 버전업될 때마다 영향을 너무 많이 받아서... 더 이상 지원하지 않으려 합니다. (기존 코드는 그냥 놔두겠지만) UseModWiki소스수정/Vim플러그인을 쓰기를 권장함.
-- Raymundo 2007-1-8 12:00 pm

Jof:UseModWiki소스수정/원본텍스트_표시하기 - {{{언어 }}} 형식을 [SyntaxHighlighter]를 사용하여 표시
-- Raymundo 2012-2-3 12:18 pm
이름:  
Homepage:
내용:
 

주인장분류 위키위키분류

마지막 편집일: 2022-10-5 2:33 pm (변경사항 [d])
4952 hits | Permalink | 변경내역 보기 [h] | 페이지 소스 보기