코드 블록 스타일
출처: 코드 블록 스타일 발행일: 2023-7-30 최종 편집: 2024-1-31 원래 섹션: 사이트 설정
관련 설정 파일
JavaScript
// START********코드 관련********
// PrismJs 코드 관련
PRISM_JS_PATH: 'https://npm.elemecdn.com/prismjs@1.29.0/components/',
PRISM_JS_AUTO_LOADER: 'https://npm.elemecdn.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js',
// 코드 테마 @see https://github.com/PrismJS/prism-themes
PRISM_THEME_PREFIX_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.css', // 코드 블록 기본 테마
PRISM_THEME_SWITCH: process.env.NEXT_PUBLIC_PRISM_THEME_SWITCH || true, // 라이트/다크 모드 코드 테마 전환 사용 여부. 켜면 아래 두 테마를 표시합니다.
PRISM_THEME_LIGHT_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-solarizedlight.css', // 라이트 모드 테마
PRISM_THEME_DARK_PATH: 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.min.css', // 다크 모드 테마
CODE_MAC_BAR: process.env.NEXT_PUBLIC_CODE_MAC_BAR || true, // 코드 왼쪽 위에 mac 빨강/노랑/초록 아이콘 표시
CODE_LINE_NUMBERS: process.env.NEXT_PUBLIC_CODE_LINE_NUMBERS || false, // 줄 번호 표시 여부
CODE_COLLAPSE: process.env.NEXT_PUBLIC_CODE_COLLAPSE || true, // 코드 박스 접기 여부
// END********코드 관련********코드 스타일 설정 설명
라이트 모드(주간 모드)와 다크 모드(야간 모드)에 각각 하나의 코드 스타일을 설정할 수 있습니다.
현재 기본값은 라이트 모드 테마 prism-solarizedlight, 다크 모드 코드 테마 prism-okaidia입니다.
지원되는 코드 테마 목록
elemecdn 참고: https://npm.elemecdn.com/prism-themes/themes/
코드 테마 온라인 미리보기: https://github.com/PrismJS/prism-themes