Modernized MoniWiki.

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

[[TableOfContents]]

== 현대적인 테마 ==
=== 현대적 폰트, 웹 폰트 ===

=== 스크롤 시 따라다니는 ToC 목차 ===

=== 맨 위로, 맨 아래로 버튼 ===

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

{{{+1 예시 }}}
CPP [[Code({{{#!vim}}})]]
{{{#!cpp
#include <iostream>

int main() {
    int a = 2;
    int b = 3;
    std::cout << a + b << std::endl;
}
}}}
PHP [[Code({{{#!php}}})]]
{{{#!php
<?php
function add($a, $b) {
    return $a + $b;
}

echo add(2, 3);
}}}

{{{+1 변경 파일 요약 }}}
{{{#!markdown
| # | 파일 | 변경 유형 | 변경 내용 |
|---|------|-----------|-----------|
| 1 | `css/_base.css` | 수정 | `.wikiSyntax` 다크 테마 스타일 적용 (배경 `#1e1e2e`, 현대적 폰트, `border-radius: 8px, box-shadow`), ` position: relative` 추가, `.wikiSyntax-copy` 버튼 CSS 추가 |
| 2 | `css/_extra.css` | 수정 | 중복 `.wikiSyntax` 스타일 제거, `pre.wikiSyntax` 색상을 다크 테마로 통일 |
| 3 | `wikilib.php` | 수정 | `processor_php()` 다크 테마용 색상 매핑 (`highlight_string` 출력 색상 치환), Copy 버튼 HTML 삽입 |
| 4 | `plugin/processor/vim.php` | 수정 | 캐시 반환/일반 반환 모두에 Copy 버튼을 `.wikiSyntax` 요소 안에 삽입 |
| 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 등록
}}}

== CSS Cache Busting 메커니즘 적용 ==
{{{+1 요약}}}
브라우저 캐시로 인해 테마의 CSS와 `./css/*`의 CSS 스타일 수정사항이 반영되지 않는 문제를 해결하기 위해, 모든 CSS <link> 태그에 filemtime() 기반 ?v= 쿼리스트링을 추가합니다.

캐시 버스팅 메커니즘은 여러가지가 있지만 모니위키에서 추천 방식: filemtime() 쿼리스트링(filemtime()이 MoniWiki의 단순한 구조에 가장 적합함. 파일이 수정될 때마다 자동으로 URL이 바뀌고, 추가 빌드 도구가 필요 없음.)

{{{+1 현재 상태}}}
테마 CSS URL 생성 (wiki.php:6000):
{{{#!vim php
$options['css_url'] = $DBInfo->url_prefix . "/theme/$theme/css/default.css";
}}}
결과: /moniwiki/theme/yourtheme/css/default.css (쿼리스트링 없음)
CSS 출력 (wiki.php:5042-5044):
{{{#!vim php
echo '  <link rel="stylesheet" type="text/css" ', $media, ' href="',
$options['css_url'] . "\" />\n";
}}}
결과: /moniwiki/css/default.css (쿼리스트링 없음)

{{{+1 변경 파일 (테마 CSS)}}}
파일: wiki.php (line 6000)
{{{#!vim php
Before:
$options['css_url']=(!empty($DBInfo->themeurl) ? $DBInfo->themeurl:$DBInfo->url_prefix)."/theme/$theme/css/default.css";

After:
$_css_path = "/theme/$theme/css/default.css";
$_css_prefix = !empty($DBInfo->themeurl) ? $DBInfo->themeurl : $DBInfo->url_prefix;
$_css_mtime = @filemtime('.' . $_css_path);
$options['css_url'] = $_css_prefix . $_css_path . ($_css_mtime ? '?v=' . $_css_mtime : '');
}}}

{{{+1 변경 파일 (./css/*)}}}
파일: wiki.php — CSS <link> 출력 (line ~5042)
{{{#!vim php
Before:
if ($options['css_url']) {
    echo '  <link rel="stylesheet" type="text/css" ',$media,' href="',
      $options['css_url']."\" />\n";
    if (file_exists('./css/_user.css')) // FIXME
      echo '  <link rel="stylesheet" media="screen" type="text/css" href="',
        $DBInfo->url_prefix,"/css/_user.css\" />\n";
}

After:
if ($options['css_url']) {
    // css/* sub-stylesheets (formerly @import in default.css)
    foreach (array('_base.css', '_extra.css', '_calendar.css') as $_css_sub) {
      if (file_exists('./css/' . $_css_sub)) {
        $_sub_mtime = @filemtime('./css/' . $_css_sub);
        echo '  <link rel="stylesheet" type="text/css" ', $media, ' href="',
          $DBInfo->url_prefix, '/css/', $_css_sub, ($_sub_mtime ? '?v=' . $_sub_mtime : ''), "\" />\n";
      }
    }
    echo '  <link rel="stylesheet" type="text/css" ',$media,' href="',
      $options['css_url']."\" />\n";
    if (file_exists('./css/_user.css')) { // FIXME
      $_user_css_mtime = @filemtime('./css/_user.css');
      echo '  <link rel="stylesheet" media="screen" type="text/css" href="',
        $DBInfo->url_prefix,'/css/_user.css', ($_user_css_mtime ? '?v=' . $_user_css_mtime : ''), "\" />\n";
    }
}
}}}

파일: css/default.css — @import 제거

{{{#!vim php
Before:
@import url("_base.css");
@import url("_extra.css");
@import url("_calendar.css");

body {

After:
body {
}}}

결과: HTML 출력 순서
{{{#!vim php
 <link rel="stylesheet" type="text/css" media="screen" href="/moniwiki/css/_base.css?v=1741234567" />
 <link rel="stylesheet" type="text/css" media="screen" href="/moniwiki/css/_extra.css?v=1741234568" />
 <link rel="stylesheet" type="text/css" media="screen" href="/moniwiki/css/_calendar.css?v=1741234569" />
 <link rel="stylesheet" type="text/css" media="screen" href="/moniwiki/theme/yourtheme/css/default.css?v=1741234570" />
 <link rel="stylesheet" media="screen" type="text/css" href="/moniwiki/css/_user.css?v=1741234571" />
}}}

----
CategoryDocument