chirpy 테마 이미지 넣기 변경됨 (feat. vscode, github)
이미지 변경?
평소처럼 블로그를 작성하고 업로드 했는데 둘러보다 이미지를 클릭했더니 되게 이상하게 뜨는 것을 발견했다.
위처럼 무슨 스크롤이 생겨 이미지가 잘리는 문제가 있었다. 분명 이전 버전까지만 해도 잘 됬는데!!
아무래도 버전을 올리면서 뭔가 변경 사항이 있었던 듯 싶다.
그래서 찾아보니 이거 원… 버전 이슈가 맞더라.. 이전게 좋았는데!!
해결 방법 1 (안됨 왜지?)
그럼 어떻게 해결하는고? 하니 1번으론 직접 코드를 뜯어 고치는게 있고 2번으론 그냥 이전까지 md로 작성할 때 vscode 에서 바로가기 키 설정(json)을 편집했는데 그걸 다시 바꿔야 하는 상황이 왔다…
근데 머.. 깡통이들은 추천하길 가능하면 width, height를 넣으라 하니 그리 해줘보자.
참고로 바로가기 키 설정 검색할 때 ctrl+shift+p를 눌러 검색하면 된다.
1
2
3
4
5
6
7
8
9
10
11
// 키 바인딩을 이 파일에 넣어서 기본값 재정의
[
{
"key": "ctrl+shift+v",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus && editorLangId == 'markdown'",
"args": {
"snippet": "![${1}](${CLIPBOARD/.*src=\"([^\"]+)\".*/$1/})"
}
}
]
그리고 이전까지는 위처럼 이미지를 github에 복사해 넣고 나온 <img width="718" height="436" alt="Image" src="https://github.com/user-attachments/assets/0102f7dc-6ba4-4085-aed3-27b10ea05608" /> 이 링크를 복사해 ctrl+shift+v를 했을 때 자동으로 ![]() 구조가 될 수 있게 만들었었다.
근데 이제 저기에 추가로 width, height를 추가해줘야하는 상황..
그렇기에 조금 길긴 하지만
1
2
3
4
5
6
7
8
9
10
11
// 키 바인딩을 이 파일에 넣어서 기본값 재정의
[
{
"key": "ctrl+shift+v",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus && editorLangId == 'markdown'",
"args": {
"snippet": "${CLIPBOARD/<img.*width=\"(\\d+)\".*height=\"(\\d+)\".*alt=\"([^\"]*)\".*src=\"([^\"]+)\".*/{: width=\"$1\" height=\"$2\" }/}$0",
},
},
]
이렇게 이름과 url, width, height를 모두 넣어주는 코드를 작성할 수 있었다.
혹시 이건 이름이 다 image가 되니까 싫다! 하면
1
2
3
4
5
6
7
8
9
10
[
{
"key": "ctrl+shift+v",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus && editorLangId == 'markdown'",
"args": {
"snippet": "![${1:대체 텍스트 입력}](${CLIPBOARD/.*src=\\s*\"([^\"]+)\".*/$1/}){: width=\"${CLIPBOARD/.*width=\\s*\"(\\d+)\".*/$1/}\" height=\"${CLIPBOARD/.*height=\\s*\"(\\d+)\".*/$1/}\" }$0"
}
}
]
이전과 비슷한 이걸 쓰면 된다. 붙여넣기를 하면 바로 이름 편집이 가능할거다. 난 아무래도 마지막게 가장 편해서 이걸로 쓸 듯 하다.
해결 방법 2 (이것도 안되는데)
아니 어째서? 안되는거지?
그렇다면 한번 이걸 건들여보자.
파일이 없었기에 새로 만들어주고,
그냥 무조건 크게 되라! 하고 넣어주면?
테스트
이게 되네….
해결 (1번 방법이 답이었다.. 근데 살짝 다르게)
참고로 위에 이미지 잘못 나온 것들은 일단 이전 문제를 기억하기 위해 그대로 두겠다.
커밋 이미지를 모면 알 수 있듯이 뭔가 많은 일들이 일어나고 다시 이 포스트를 작성했던 때로 돌아왔는데 쩝… 이게 참… 난 코드를 건들거나 해야하나? 하는 생각에 깡통이랑 이것 저것을 하며 이야기를 나눠봤는데 아니 공식 chirpy 태마 블로그나 다른 사람들, 하다못해 issue를 봐도 문제가 없던거다.
그래서 그럼 당최 뭐가 문제일까 하여 아예 element를 열어 어떻게 되기에 이런가 하고 봤더니…
아니 이거 이미지가 아니라 iframe으로 나오네? 게다가 image가 아니라 video 라고 하네? 와 씨 이거다!!
그런데 정작 이미지를 명시해주기 위해
 이렇게 png를 붙여버리면 어떻게 될까?
아예 그냥 이미지를 못 불러오는 참사가 생긴다.
이걸 해결하려면?
 이렇게 #.png를 붙여 이거 링크는 앞에건데 확장자는 그래도 png야 라고 명시해주면 되는 것이다!!!!!
그리고 그렇기 때문에 vscode 키 설정도 살짝 바뀌게 된다.
1
2
3
4
5
6
7
8
9
10
11
// 키 바인딩을 이 파일에 넣어서 기본값 재정의
[
{
"key": "ctrl+shift+v",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus && editorLangId == 'markdown'",
"args": {
"snippet": "![${1:대체 텍스트 입력}](${CLIPBOARD/.*src=\\s*\"([^\"]+)\".*/$1/}#.png)$0",
},
},
]
이렇게 간단하게 해결될 문제라니..
일단 이번 기회에 확실히 알기도 했고 최근 htb 문제 푼 것들은 다 바꿔줘야겠다… 쩝.. 노가다로구나..
그래도 해결을 해냈고! 이렇게 기록에도 성공했으니 만족이다. 다음번에 또 이런 일이 생기면 바로 그 땐 element 부터 뜯어봐야겠다.
자동화 코드
oil-lamp-cat/Chirpy-Them-Post-Image-linking-change
문제를 찾았으니 해결해야 하는데 하나씩 손으로 #.png를 넣자니 넘 오래 걸려서 그냥 자동화 스크립트를 하나 만들었다!