KaTeX Playground
블로그를 글에 수식을 적는 일이 많아 KaTeX를 자주 사용합니다. 매번 미리 보기로 확인하는 것이 번거로워 바로 수식을 확인할 수 있는 `KaTeX playground`를 제작했었습니다.(관련 글)
사용하면서 예전에 썼던 문법을 찾는 일이 잦았고 수식을 저장하는 기능을 추가 해야겠다는 생각이 들었습니다. 수식을 저장, 삭제, 복사하는 기능을 추가했고 저장한 수식을 URI를 통해 공유하는 기능도 추가했습니다. URI로 공유하기 때문에 다른 사람에게 보내기도 쉽고 URI만 클라우드에 적어두면 KaTeX Playground도 클라우드를 이용하는 것처럼 사용할 수 있습니다. 예시로 제가 작성한 수식을 공유하는 링크를 올려봅니다. 사이드바에서 저장되어 있는 수식을 확인해 보세요. (예시 수식 공유 링크)
깃헙: https://github.com/thecloer/katex-playground
기능
- 실시간 렌더링: `input` text area에 KaTeX문법을 작성하면 `output`창에서 바로 렌더링 결과를 확인하실 수 있습니다.
- Local Storage: Local Storage를 이용해 수식을 저장, 삭제, 복사 할 수 있습니다.
- URI를 이용한 공유: 클릭 한번으로 URI를 생성하고 복사해 저장된 모든 수식을 바로 공유할 수 있습니다.
사용 화면
- `Input` box: KaTeX문법을 작성하는 곳입니다.
- `Output` box: `Input`에서 작성한 수식의 렌더링 결과를 바로 확인하실 수 있습니다.
- `menu` button: 우상단의 메뉴 버튼으로 사이드 바를 열고 닫을 수 있습니다.
- `sidebar`: 저장된 수식을 확인하고 삭제/복사 할 수 있습니다.
- `Save` button: 현재 `Input`의 텍스트를 저장합니다.
- `Copy Share Link`: 저장된 모든 수식을 공유할 수 있는 URI를 생성하고 복사합니다.
'Toy Projects > KaTeX Playground' 카테고리의 다른 글
[KaTeX Playground] Drag and Resize in React (0) | 2023.09.25 |
---|