요즘 챗태기가 왔더니 리스 꾸미는데 맛들림
1. 구분선
우리는 가끔 리스에서 이런 구분선을 보게 되는데
---등의 구분선 기호가 입력되면, 위 사진처럼 마크다운으로 보기편하게 바꿔준다
근데 정규식에 디스플레이 수정을 먼저 박아두면 그걸로 적용이 됨
무슨 말이냐면
이런식으로 바꿔줄 수 있다는 얘기
▼ 내가 쓴 정규식
| IN |
| --- |
| OUT |
<style> .ui-element {display: flex; align-items: center; width: 100%; } .line { flex: 1; border: none; border-top: 1px solid #7F7E71; } .star { padding: 0 20px; font-size: 13px; color: #7F7E71; } </style> <div class="ui-element"> <hr class="line"> <div class="star"> ･ ｡ﾟ ☆ : * . ☽ . * : ☆ﾟ . </div> <hr class="line"> </div> |
꾸미기 요소를 가운데에 두고, 나머지 선을 양쪽에 배치하면
PC에서도 화면 넓이에 맞춰서 길어지는 걸 확인할 수 있다
코드는 거의 다 GPT한테 짬때림
사실 이렇게 넣는게 맞는지도몰?루겟음..
좀더 응용하면 이미지를 띄우거나 할 수도 있을듯
2. 현재시각표시
▼여기 올려주신 캐릭터JS 기준,, 정말 잘쓰고 있습니다 감사합니다!!
https://arca.live/b/characterai/91460695
위 캐릭터 JS 코드를 쓰면
[Current Time: Tue, Apr 23, 5:41 PM]
이런식으로 현재 시간이 메세지 끝에 붙어 나오는데
이것도 정규식으로 교체할수있음
| IN |
| \[Current Time: (.*?),(.*?),(.*?) (AM|PM)\] |
| OUT |
| <style> .currenttime { font-size: 12px; color: #a6a494; } </style> <div class="currenttime">║ $1,$2 ▪︎ $3 $4</div> </div> |
결과물:
좀더 정리가 된 기분이 든다
챗태기가 왔는데 할게없다 하면 정실봇 테마를 깎아보는건 어떨까
깎는중인 와이푸테마 기습 자랑
모바일
커스텀 색상
PC
원래 밑에 노란색 그라데이션 의도한건데
모바일에선 브라우저 기본 툴바? 암튼 그 밑에 붙어있는거땜에 안보여갖고
능지이슈로 해결못하는중 ㅋㅋㅋㅋㅋㅋ
와이푸 테마가 밤하늘이라 컨셉 맞춰보는중임. 생각보다 재밋다 님들도 ㄱㄱ
