Modernized MoniWiki.

모니위키를 현대적인 웹 스타일로 사용하는 방법을 다룹니다.

[[TableOfContents]]

== 현대적인 스타일의 코드 하이라이팅 프로세서(VimProcessor, PhpProcessor) ==
VimProcessor, PhpProcessor의 코드 하이라이팅 개선

예시:
PHP
{{{#!php
<?php
function add($a, $b) {
    return $a + $b;
}

echo add(2, 3);
}}}
CPP
{{{#!cpp
#include <iostream>

int main() {
    int a = 2;
    int b = 3;
    std::cout << a + b << std::endl;
}
}}}

변경 파일 요약
{{{#!markdown
| # | 파일 | 변경 유형 | 변경 내용 |
|---|------|-----------|-----------|
| 1 | `css/_base.css` | 수정 | `.wikiSyntax` 다크 테마 스타일 적용 (배경 `#1e1e2e`, 현대적 폰트, `border-radius`, `box-shadow`), `.wikiSyntax-copy` 버튼 CSS 추가 |
| 2 | `css/_extra.css` | 수정 | 중복 `.wikiSyntax` 스타일 제거, `pre.wikiSyntax` 다크 테마로 통일 |
| 3 | `wikilib.php` | 수정 | `processor_php()` 다크 테마 색상 매핑 추가, Copy 버튼 HTML 삽입 |
| 4 | `plugin/processor/vim.php` | 수정 | 캐시/일반 반환 모두 `.wikiSyntax` 내부에 Copy 버튼 삽입 |
| 5 | `config.php` | 수정 | `$javascripts` 배열에 `wikisyntax-copy.js` 등록 |
| 6 | `local/wikisyntax-copy.js` | 신규 | 클립보드 복사 함수 — span.line 줄바꿈 처리 (vim), `<br>` / `&nbsp;` 변환 처리(php), 구형 브라우저 fallback) |
}}}

{{{#!folding 설치 방법

  1. 다크 테마 적용 (css/_base.css)

  - .wikiSyntax 배경색을 #1e1e2e (Catppuccin Mocha)로 변경
  - 폰트를 JetBrains Mono, Fira Code 등 현대적 코딩 폰트로 변경
  - border-radius: 8px, box-shadow 추가로 입체감 부여
  - line-height: 1.6, tab-size: 4로 가독성 향상

  2. 중복 스타일 정리 (css/_extra.css)

  - .wikiSyntax 중복 정의 제거
  - pre.wikiSyntax 색상을 _base.css와 동일한 다크 테마로 통일

  3. PHP 프로세서 다크 테마 색상 매핑 (wikilib.php)

  - highlight_string() 출력 색상을 다크 배경에 맞게 치환
    - 변수/식별자: #0000BB → #89b4fa
    - 키워드: #007700 → #a6e3a1
    - 문자열: #DD0000 → #f38ba8
    - 주석: #FF8000 → #6c7086
    - 기본 텍스트: #000000 → #cdd6f4

  4. Copy 버튼 추가

  CSS (css/_base.css)

  - .wikiSyntax-copy 버튼 스타일 추가
  - 코드 블록 호버 시 우상단에 페이드인 표시
  - 복사 완료 시 초록색 피드백

  JavaScript (local/wikisyntax-copy.js) — 신규 파일

  - navigator.clipboard API 사용 + 구형 브라우저 fallback
  - vim 프로세서: span.line 단위로 \n join하여 줄바꿈 보존
  - php 프로세서: <br /> → \n, &nbsp; → 공백 변환 처리
  - Copy 버튼 텍스트 자체가 클립보드에 포함되지 않도록 제외 처리

  PHP 프로세서 (wikilib.php)

  - processor_php() 출력에 Copy 버튼 HTML 삽입

  Vim 프로세서 (plugin/processor/vim.php)

  - 캐시 반환/일반 반환 모두 .wikiSyntax 요소 내부에 Copy 버튼 삽입

  설정 (config.php)

  - $javascripts 배열에 wikisyntax-copy.js 등록

  5. GCode 프로세서 다크 테마 (gcode/css/SyntaxHighlighter.css)

  - 배경/텍스트를 Catppuccin Mocha 팔레트로 통일
  - 주석: #6c7086, 문자열: #a6e3a1, 키워드: #89b4fa, 전처리기: #f9e2af
  - 폰트, 테두리, 그림자를 vim/php 프로세서와 동일하게 적용
}}}
----
CategoryDocument