{"id":47275694,"url":"https://github.com/romantech/tistory-plugins","last_synced_at":"2026-05-02T09:00:43.151Z","repository":{"id":344570192,"uuid":"1182249407","full_name":"romantech/tistory-plugins","owner":"romantech","description":"티스토리 커스텀 플러그인 모음","archived":false,"fork":false,"pushed_at":"2026-05-02T07:03:59.000Z","size":5324,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-02T08:36:38.792Z","etag":null,"topics":["javascript","tistory","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/romantech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-03-15T08:52:55.000Z","updated_at":"2026-05-02T07:03:51.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/romantech/tistory-plugins","commit_stats":null,"previous_names":["romantech/tistory-plugins"],"tags_count":91,"template":false,"template_full_name":null,"purl":"pkg:github/romantech/tistory-plugins","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romantech%2Ftistory-plugins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romantech%2Ftistory-plugins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romantech%2Ftistory-plugins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romantech%2Ftistory-plugins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/romantech","download_url":"https://codeload.github.com/romantech/tistory-plugins/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/romantech%2Ftistory-plugins/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32528665,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T01:12:54.858Z","status":"online","status_checked_at":"2026-05-02T02:00:05.923Z","response_time":132,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","tistory","typescript"],"created_at":"2026-03-15T17:23:45.327Z","updated_at":"2026-05-02T09:00:43.138Z","avatar_url":"https://github.com/romantech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tistory-plugins\n\n![toc-desktop-hover demo](/docs/images/toc-desktop-hover.png)\n\n외부 스크립트 태그만 추가하면 바로 적용할 수 있는 티스토리 블로그용 플러그인 모음입니다. 모든 플러그인은 jsDelivr CDN을 통해 제공되므로 별도 파일 업로드가 필요 없으며, 스킨 HTML 구조를 직접 수정하지 않고, 런타임에 필요한 요소를 탐색하여 기능을 주입합니다.\n\n## 플러그인 목록\n\n| 플러그인                                       | 에셋 | 설명                                                         | 문서                                           |\n| ---------------------------------------------- | ---- | ------------------------------------------------------------ | ---------------------------------------------- |\n| [`inline-code`](src/plugins/inline-code)       | JS   | 백틱으로 감싼 인라인 텍스트를 `\u003ccode\u003e`로 변환합니다.         | [README](src/plugins/inline-code/README.md)    |\n| [`katex`](src/plugins/katex)                   | JS   | `$...$`, `$$...$$` 수식을 KaTeX로 렌더링합니다.              | [README](src/plugins/katex/README.md)          |\n| [`copy-code`](src/plugins/copy-code)           | JS   | 코드 블록 우측 상단에 복사 버튼을 추가합니다.                | [README](src/plugins/copy-code/README.md)      |\n| [`focus-guard`](src/plugins/focus-guard)       | JS   | 사이드바 토글 시 발생하는 `aria-hidden` 포커스 경고를 완화합니다. | [README](src/plugins/focus-guard/README.md)    |\n| [`heading-anchor`](src/plugins/heading-anchor) | JS   | 제목에 앵커 링크를 추가하고 해시 이동 위치를 보정합니다.     | [README](src/plugins/heading-anchor/README.md) |\n| [`toc`](src/plugins/toc)                       | JS   | 데스크톱은 레일형, 모바일은 팝업형 목차를 표시합니다.        | [README](src/plugins/toc/README.md)            |\n\n\u003e 본문 컨테이너 감지는 공통 로직을 사용합니다. 처리 대상과 주의사항은 플러그인마다 다르므로 적용 전 각 README를 확인해주세요.\n\u003e `copy-code`, `heading-anchor`, `toc`는 실행 시 동일 경로의 `index.min.css`를 자동으로 로드합니다.\n\u003e `katex`는 별도 companion CSS 대신 KaTeX 스타일시트를 외부 CDN에서 주입합니다.\n\n---\n\n## 빠른 적용\n\n1. 티스토리 관리자 → 스킨 편집 → HTML 편집 페이지로 이동합니다.\n2. 원하는 플러그인의 `\u003cscript\u003e` 태그를 `\u003c/body\u003e` 바로 위에 추가합니다.\n\n```html\n\u003cscript defer src=\"https://cdn.jsdelivr.net/gh/romantech/tistory-plugins@latest/dist/heading-anchor/index.min.js\"\u003e\u003c/script\u003e\n```\n\n## CDN 경로 규칙\n\n```text\nJS:  https://cdn.jsdelivr.net/gh/romantech/tistory-plugins@\u003cversion\u003e/dist/\u003cplugin\u003e/index.min.js\nCSS: https://cdn.jsdelivr.net/gh/romantech/tistory-plugins@\u003cversion\u003e/dist/\u003cplugin\u003e/index.min.css\n```\n\n- CSS 경로는 companion CSS가 있는 플러그인(`copy-code`, `heading-anchor`, `toc`)에만 해당합니다.\n- `\u003cversion\u003e` 자리에는 `latest`(최신 릴리즈), `main`(브랜치), `0.1.27`(태그) 형식을 사용합니다.\n\n## 조합 예시\n\n인라인 코드, 수식, 코드 복사 버튼, 제목 앵커, 목차를 함께 사용하려면 아래와 같이 추가합니다.\n\n```html\n\u003cscript defer src=\"https://cdn.jsdelivr.net/gh/romantech/tistory-plugins@latest/dist/inline-code/index.min.js\"\u003e\u003c/script\u003e\n\u003cscript defer src=\"https://cdn.jsdelivr.net/gh/romantech/tistory-plugins@latest/dist/katex/index.min.js\"\u003e\u003c/script\u003e\n\u003cscript defer src=\"https://cdn.jsdelivr.net/gh/romantech/tistory-plugins@latest/dist/copy-code/index.min.js\"\u003e\u003c/script\u003e\n\u003cscript defer src=\"https://cdn.jsdelivr.net/gh/romantech/tistory-plugins@latest/dist/heading-anchor/index.min.js\"\u003e\u003c/script\u003e\n\u003cscript defer src=\"https://cdn.jsdelivr.net/gh/romantech/tistory-plugins@latest/dist/toc/index.min.js\"\u003e\u003c/script\u003e\n```\n\n## 본문 컨테이너 감지\n\n본문을 대상으로 동작하는 플러그인은 아래 셀렉터를 순서대로 확인합니다. 각 셀렉터는 kebab-case 기준으로 정의되어 있으며, snake_case 변형도 함께 탐색합니다.\n\n- `.contents-style`\n- `.entry-content`\n- `.area-view`\n- `.post-content`\n- `.article-view`\n- `#article`\n- `.article-cont`\n\n아래 셀렉터는 fallback 후보로 사용하며, 글 분량과 콘텐츠 밀도가 충분한 경우에만 채택합니다.\n\n- `.tt-article-useless-p-margin`\n- `.inner-content`\n\n스킨 구조가 다르면 `window.RPPlugins.articleSelectors`로 우선 탐색할 본문 셀렉터를 지정할 수 있습니다. 지정한 셀렉터를 먼저 확인한 뒤, 기본 후보를 이어서 탐색합니다.\n\n```html\n\u003cscript\u003e\n  window.RPPlugins = {\n    articleSelectors: [\".my-article\", \"#main-content\"],\n  };\n\u003c/script\u003e\n```\n\n## 전역 설정\n\n플러그인 스크립트를 불러오기 **전에** `window.RPPlugins`를 선언하면 공통 설정과 각 플러그인 옵션을 변경할 수 있습니다.\n\n```html\n\u003cscript\u003e\n  window.RPPlugins = {\n    articleSelectors: [\".my-article\", \"#main-content\"],\n    copyCode: {\n      buttonText: \"복사\",\n      successText: \"완료\",\n      errorText: \"실패\",\n      ariaLabel: \"코드 복사\"\n    },\n    headingAnchor: {\n      levels: [2, 3, 4, 5],\n      headerOffset: 64\n    },\n    inlineCode: {\n      targetSelector: \"p, li, td, figcaption\",\n      blockedSelector: \"code, pre, script, style, textarea\"\n    },\n    katex: {\n      delimiters: [\n        { left: \"$$\", right: \"$$\", display: true },\n        { left: \"\\\\(\", right: \"\\\\)\", display: false }\n      ],\n      ignoredClasses: [\"math-ignore\", \"no-katex\"],\n      ignoredTags: [\"script\", \"noscript\", \"style\", \"textarea\", \"pre\", \"code\"]\n    },\n    toc: {\n      levels: [2, 3, 4],\n      headerOffset: 64\n    }\n  };\n\u003c/script\u003e\n```\n\n| 옵션               | 설명                                    |\n| ------------------ | --------------------------------------- |\n| `articleSelectors` | 본문 컨테이너 감지용 셀렉터 목록        |\n| `copyCode`         | 버튼 문구 및 `aria-label` 커스터마이징  |\n| `headingAnchor`    | 처리할 제목 레벨과 해시 이동 오프셋     |\n| `inlineCode`       | 인라인 코드 변환 대상 및 제외 셀렉터    |\n| `katex`            | 수식 구분자, 무시할 클래스·태그         |\n| `toc`              | 목차에 포함할 제목 레벨과 스크롤 오프셋 |\n\n---\n\n## 저장소 구조\n\n```\nsrc/plugins   플러그인 소스 및 개별 README\nsrc/shared    공통 유틸리티\ndist          CDN 배포용 빌드 산출물\n```\n\n---\n\n## 개발 명령어\n\n| 명령어                                 | 설명                                                         |\n| -------------------------------------- | ------------------------------------------------------------ |\n| `pnpm clean`                           | `dist` 폴더를 초기화합니다.                                  |\n| `pnpm build`                           | `dist`를 초기화한 뒤 배포용 파일을 생성합니다.               |\n| `pnpm preview \u003curl\u003e`                   | 실제 블로그 페이지를 열고 jsDelivr `dist/*` 요청을 로컬 빌드로 override합니다. watch 모드로 동작하며, 첫 실행 이후에는 마지막 URL을 자동으로 재사용합니다. |\n| `pnpm preview --plugin \u003cplugin\u003e`       | 특정 플러그인만 빌드하고 override 범위를 해당 플러그인으로 제한합니다. |\n| `pnpm preview \u003curl\u003e --inject \u003cplugin\u003e` | 플러그인을 설치하지 않은 블로그에 로컬 `dist` 에셋을 직접 주입하여 동작을 미리 확인합니다. 여러 플러그인은 쉼표로 구분합니다. |\n| `pnpm check`                           | Biome 검사를 읽기 전용으로 실행합니다.                       |\n| `pnpm check:write`                     | Biome 검사 결과를 가능한 범위에서 자동으로 수정합니다.       |\n| `pnpm typecheck`                       | TypeScript 타입 검사를 수행합니다.                           |\n| `pnpm test`                            | Vitest 테스트를 실행합니다.                                  |\n| `pnpm test:watch`                      | 테스트를 watch 모드로 실행합니다.                            |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromantech%2Ftistory-plugins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fromantech%2Ftistory-plugins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fromantech%2Ftistory-plugins/lists"}