사용자 입력을 그대로 출력하기
-
- 1. 개요
-
- 2. {{{ }}} 태그의 사용법 및 예문
-
-
- 2.1. 단순한 코드 출력
-
- 2.2. Syntax Highlighting
-
html 은 자신의 태그를 나타내는 방법으로 부등호쌍을 이용하기 때문에, 정작 사용자가 태그 자체 또는 다른 문자열이 들어 있는 부등호쌍을 출력하려고 할 때 웹브라우저가 그 부분을 html 태그로 인식하여 화면에 출력하지 않고 삼켜버리는 사태가 발생한다.
특히나 컴퓨터 프로그램의 코드 (UseModWiki 에서 사용하는 wiki.pl 을 비롯하여) 를 html 화일로 나타내기 위해서는 &, <, >, 등을 꼬박꼬박 & < > 등으로 바꾸어줘야 한다. 이것은 귀찮은 일이기도 하거니와, 단 한 곳이라도 변환하는 것을 빼먹으면 그 코드는 동작하지 않는 에러투성이가 되고 만다.
설상가상으로, UseModWiki 에서는 사용자가 수작업으로 입력한 & < > 를 친절하게도(!) 자동으로 &, <, > 으로 바꿔버리기 때문에, 위에서 언급한 변환을 이중으로 하여야 되는 문제가 있다. (즉, 화면에 & 라고 출력하기 위해서는 실제로는 &amp; 라고 입력해야 하는 것이다)
이 불편한 상황을 타개해보고자, MoinMoin 에서 지원하는 {{{ }}} 태그를 UseModWiki 에 비슷하게 구현해 보았다. 하는 김에, 겸사겸사 SyntaxHighlighting 도 지원하도록 해 보았다.
2. {{{ }}} 태그의 사용법 및 예문
2.1. 단순한 코드 출력
프로그램 코드 뿐 아니라, 고정폭 글꼴로 출력되길 바라는 곳에서도 사용가능하다.
{{{
html 태그에는 <br>, <hr> 등이 있다, < > & 를 화면에 표시하고 싶다면 < > & 를 사용하라
이 안에서는 <font color="red">어떠한 태그도 동작하지 않는다</font>
}}}
위와 같이 적으면 다음과 같이 출력된다.
html 태그에는 <br>, <hr> 등이 있다, < > & 를 화면에 표시하고 싶다면 < > & 를 사용하라
이 안에서는 <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]라는 별도의 유틸리티를 호출하게 하여 구현한다. 따라서 출력의 질은 이 유틸리티의 성능에 제약을 받는다.
- 언어는 다음과 같이 지정할 수 있다
- cpp, java, javascript, prolog, perl, php3, python, flex, changelog 중 하나를 지정한다
- c 는 따로 지원하지 않으니 cpp 를 사용하라
- 위에 나열된 언어 외의 문자열을 지정할 경우 source-highlight 가 처리하지 못한다. 따라서 이런 경우 {{{ }}} 를 사용한 것처럼 처리한다.
- 옵션은 다음과 같이 사용할 수 있다
- n : 행번호를 출력한다.
- 십진수 : 코드 내에 탭이 있을 경우 몇 개의 스페이스로 치환할 지를 지정한다. 생략하면 기본값은 8이다.
- 위 옵션들을 조합하여 n, 8, n4, 10n 등과 같이 사용할 수 있다.
다음은 C 와 Java 프로그램을 출력하는 예문이다. 부등호와 html 태그도 그대로 출력된다.
- c code, tab 크기 4 : {{{cpp }}}
main(int argc, char * argv[])
{
/* 주석문 */
if (1) {
printf("Hello, world<br>\n");
}
}
- java code, tab 크기 8, 행번호 표시 : {{{java|8n }}}
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 가 추가로 지원됩니다
source-highlight를 2.2로 업글했더니 출력 포맷이 바뀌어버려서... -_-;;; 현재 이 홈페이지에서 {{{#!vim perl }}} 로 출력한 곳들이 죄다 엉망으로 나오고 있음.. OTL
- 해결함
source-highlight 를 사용한 {{{언어 }}} 의 방식은, 외부 프로그램이 버전업될 때마다 영향을 너무 많이 받아서... 더 이상 지원하지 않으려 합니다. (기존 코드는 그냥 놔두겠지만) UseModWiki소스수정/Vim플러그인을 쓰기를 권장함.
UseModWiki소스수정/원본텍스트_표시하기 - {{{언어 }}} 형식을 [SyntaxHighlighter]를 사용하여 표시
주인장분류 위키위키분류