[286] 옵시디언 Ninja Cursor 플러그인, CSS 코드 스니펫 소개

CSS 코드 스니펫은 Obsidian 플러그인 "Ninja Cursor"를 사용자 정의하여 다양한 문제를 해결하고 기능을 추가하는 방식으로 작성되었습니다. 이 CSS를 적용하려면 다음 단계를 따라야 합니다.

https://obsidian.md/plugins?id=ninja-cursor

https://forum.obsidian.md/t/options-to-modify-cursor-style/1091/53

1. CSS 코드 적용 방법

1-1. Obsidian에서 사용자 스타일 활성화

1. Obsidian 앱을 실행합니다.
2. 설정(Settings) 메뉴로 이동합니다.
3. "Appearance" (외형)탭을 클릭합니다.
4. "Custom CSS" 또는 "Community Themes" 섹션에서사용자 정의 CSS를 활성화합니다.

1-2. 사용자 정의 CSS 파일 생성

1. Obsidian의 설정 폴더(예:.obsidian/snippets/)로 이동합니다.
2. 새로운.css파일을 생성하고, 파일 이름을ninja-custom.css와 같이 지정합니다.
3. 위의 CSS 코드를 복사하여 해당 파일에 붙여넣습니다.
4. 저장 후 Obsidian 설정에서"Snippets"탭으로 이동하여 새로 생성한 스니펫을 활성화합니다.

2. 주요 기능 및 문제 해결

2-1. 사용자 강조 색상 적용

• Obsidian의 설정에서 선택한 **강조 색상(Appearance > Accent Color)**을 커서 색상으로 자동 반영합니다.
• --my-cursor-color변수를 통해 HSL 값으로 강조 색상을 계산하여 적용합니다.

2-2. 멀티 커서 문제 해결

• 멀티 커서를 사용할 때, 기본 Ninja Cursor 외에도 다른 커서를 더 크고 사용자 정의 색상으로 표시하며 애니메이션 없이 고정됩니다.
• 이를 위해.cm-cursorLayer:has(.cm-cursor-secondary)에 애니메이션을 비활성화하는 규칙이 추가되었습니다.

2-3. 텍스트 선택 시 Ninja Cursor 숨김

• 텍스트가 선택되었을 때 Ninja Cursor를 숨기고, 대신 사용자 정의된 커서를 표시합니다.
• 이로 인해 멀티라인 선택 시 발생하는 커서 위치 오류가 해결됩니다.

2-4. 읽기 모드에서 Ninja Cursor 숨김

• 읽기 모드(data-mode="preview")에서는 Ninja Cursor가 완전히 비활성화됩니다.

3. 주요 스타일 및 동작 설명

3-1. 커서 스타일링

.x-cursor {

background: var(--my-cursor-color);

width: var(--ninja-cursor-width);

height: calc(var(--ninja-cursor-height) + var(--cursor-height));

opacity: 1;

transition: opacity;

}

• --my-cursor-color로 정의된 색상을 배경색으로 사용하며, 커서의 크기와 투명도를 조정합니다.
  

​3-2. 깜박임 애니메이션

@keyframes blink0 {

0%, 45% { opacity: 1; }

50%, 95% { opacity: 0.3; }

}

• 커서가 깜박이는 효과를 추가하며, 두 가지 애니메이션(blink0,blink1)이 번갈아 적용됩니다.
• 
  

4. 적용 사례

4-1. 멀티 커서 사용

멀티 커서를 활성화하면 기본 커서 외에 다른 커서들이 더 크고 눈에 띄는 색상으로 표시됩니다.

4-2. 텍스트 선택 시

텍스트를 드래그하여 선택하면 Ninja Cursor가 숨겨지고, 대신 일반적인 텍스트 선택 커서가 표시됩니다.

4-3. 읽기 모드 사용

읽기 모드로 전환하면 Ninja Cursor가 완전히 비활성화되어 깔끔한 화면을 제공합니다.

5. 추가 팁

1. Obsidian 플러그인 "Ninja Cursor"가 설치되어 있어야 합니다.
2. CSS 스니펫은 Obsidian의 최신 버전과 호환성을 유지해야 하며, 업데이트 시 문제가 발생할 수 있으므로 백업을 권장합니다.
3. 필요에 따라--ninja-cursor-height,--ninja-cursor-width등의 변수를 수정하여 커서를 더 세부적으로 조정할 수 있습니다.

이 과정을 따라하면 위의 CSS 스니펫을 성공적으로 적용하고, Ninja Cursor 관련 문제를 해결하며 새로운 기능을 활용할 수 있습니다!