Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/toast ui 코드 하이라이터 가능하도록 처리 #894

Conversation

redzzzi
Copy link
Collaborator

@redzzzi redzzzi commented May 15, 2024

  • toast ui의 code syntax highlight 모듈 임포트
  • code syntax의 테마 설정을 위해 prismjs 임포트
  • toast ui의 code syntax highlight에서 모든 언어를 지원하는 js 파일을 타입스크립트로 선언

#468

연관 이슈

작업 요약

  • 게시물 글쓰기에서 코드 작성 시 code syntax highlighter 기능을 추가하였습니다.

작업 상세 설명

  • toast ui의 code syntax highlight 플러그인을 사용하였습니다.
  • prismjs의 prism-tomorrow 테마를 적용하였습니다.

리뷰 요구사항

  • js 파일을 node_modules/@types 폴더 하위에 @toast-ui 폴더를 따로 만들어 declare module을 해주었는데, 해당 방법이 최적의 방법인지 궁금합니다!

Preview 이미지

image
image

- toast ui의 code syntax highlight 모듈 임포트
- code syntax의 테마 설정을 위해 prismjs 임포트
- toast ui의 code syntax highlight에서 모든 언어를 지원하는 js 파일을 타입스크립트로 선언

#468
@redzzzi redzzzi requested a review from publdaze May 15, 2024 02:56
@redzzzi redzzzi self-assigned this May 15, 2024
Copy link
Contributor

@publdaze publdaze left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다 👍👍👍

src/components/Editor/StandardEditor.tsx Outdated Show resolved Hide resolved
src/components/Viewer/StandardViewer.tsx Outdated Show resolved Hide resolved
@publdaze publdaze added the Feature 기능 추가 label May 18, 2024
- '@toast-ui/editor-plugin-code-syntax-highlight' 모듈을 임포트하여 codeSyntaxHighlight 사용
- 하이라이트 지원하는 언어 파일을 임포트
- Prism 테마 사용

#468
- '@toast-ui/editor-plugin-code-syntax-highlight' 모듈을 임포트하여 codeSyntaxHighlight 사용
- Prism 테마 사용

#468
- code syntax highlight 적용할 언어를 prismjs가 지원하는 선에서 임포트
- 임포트 해오는 언어 모듈이 많아 'prism-markup-templating' 모듈을 활용

#468
src/components/Editor/StandardEditor.tsx Outdated Show resolved Hide resolved
src/components/Editor/StandardEditor.tsx Outdated Show resolved Hide resolved
@redzzzi redzzzi changed the title feat: toast ui 코드 하이라이터 가능하도록 처리 Featrue/ toast ui 코드 하이라이터 가능하도록 처리 May 23, 2024
@redzzzi redzzzi changed the title Featrue/ toast ui 코드 하이라이터 가능하도록 처리 Featrue/toast ui 코드 하이라이터 가능하도록 처리 May 23, 2024
@redzzzi redzzzi changed the title Featrue/toast ui 코드 하이라이터 가능하도록 처리 Feature/toast ui 코드 하이라이터 가능하도록 처리 May 23, 2024
@redzzzi redzzzi requested a review from publdaze May 23, 2024 06:37
Copy link
Contributor

@publdaze publdaze left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏👏👏 첫 기여 축하드립니다! 수고하셨어요~

  • toast ui 코드 하이라이터 가능하도록 처리 #468 이슈에 assignee 안 달려있던데, 달아주세용!

  • PR 내용에 이슈 앞에 Close 달아두면 PR 머지 시 자동으로 close 된답니다~! PR 머지되면 해결되는 이슈인 경우에 Close #468이런 식으로 작성해주면 따로 이슈 안 닫아도 돼서 편할 거에요

  • 테스트 해보다가 버그 발견했는데(``` 후 엔터키 누르면 발생하는 것 같아요), 해당 PR으로 발생한 버그는 아닌 것 같아서 이 PR은 머지하고 새로 이슈 파서 버그 픽스 해보면 좋을 것 같아요~

    2024-05-23.10.58.03.mov

이만 approve하고 물러가겠습니다~

@publdaze
Copy link
Contributor

publdaze commented May 23, 2024

아 제 PR 머지된 부분이랑 코드 변경사항 둘다 에디터쪽 겹쳐서 conflict 나는군요!
develop pull 받아서 conflict 해결하고 정상동작 확인 후 머지해주시면 됩니다!

@redzzzi redzzzi merged commit eff1ebf into develop May 23, 2024
1 check passed
@redzzzi redzzzi deleted the feature/toast_ui_코드_하이라이터_가능하도록_처리_#468 branch May 23, 2024 17:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature 기능 추가
Projects
None yet
Development

Successfully merging this pull request may close these issues.

toast ui 코드 하이라이터 가능하도록 처리
2 participants