후기 오늘은 정규식으로..
페이지 정보
(47.♡.♡.2)본문
마크다운 에디터에서 Custom CSS 를 만들어 보고 있는 중입니다. (PHP도 어렵고, CSS도 어렵고, 정규식은 더 어렵고.. ? )
하여간 마크다운 에디터에서 최종 출력되는 HTML 파일에 다양한 속성이 없이 나와서..
몇가지 구분해 달라고 요청도 해보고, 나름 고쳐 볼려고 공부도 하고 있는 중인데,
이 파트를 맞고 있는 부분이 (마크다운 엔진) GoLang으로 쓰여져 있어서 이것도 봐야 되나 하고 고민중이었는데..
오늘자 올라온 글을 보고 가능할 것 같아서 삽질을 해 봤습니다. ㅎㅎ
대략 출력되는 HTML이 아래와 같습니다.
<h2 id="1-Heading"><a id="vditorAnchor-1-Heading" class="vditor-anchor" href="#1-Heading"></a>1 Heading</h2>
그런데 https://mdnice.com/ 라는 중국 사이트를 보면 아래와 같이 멋있는 헤딩이..
그래서 html을 체크해 보니
<h2>
<span class="prefix"></span>
<span class="content">1 Markdown Nice 简介</span>
<span class="suffix"></span>
</h2>
그래서 정규식을 써서 원래 텍스트와 속성을 빼서 넣으면 될 것 같아서.. 검색시작
정규식 테스트는 여기서 https://regex101.com/
역시 스택오버플로우
https://stackoverflow.com/questions/16005413/using-regex-to-get-text-between-multiple-html-tags
정규식 그룹이 뭔지도 공부하고
그래서 만든 정규식이..
html1 = html.replace(/<h2(.*?)>(.*?)<\/h2>/gm, '<h2$1><span class="prefix"></span><span class="content">$2</span><span class="suffix"></span></h2>');
그리고 css를 적용해서 만들어 봤습니다.
추가:
h2 태그 안에 있는 a 태그와 텍스트도 분리해서 배치를 따로 해 볼까 해서 검색해서..
html1 = html.replace(/<h([1-6])(.*?)>(<a\s[^>]*[^>]*>.*?<\/a>)(.*?)<\/h[1-6]>/gm, '<h$1$2><span class="prefix"></span><span class="content">$4$3</span><span class="suffix"></span></h$1>');
이렇게 하면 헤딩에 대한 a태그 위치를 앞이 아닌 뒤에 배치할 수 있을 것 같습니다.
오른쪽으로 옮겼더니, 안되네요. 그래서 체크해 보니 CSS가 left로 고정.. 그래서 아래와 같이 수정하니.
.vditor-anchor {
float: none;
padding-right: 0px;
margin-left: 0px;
}
아래와 같이 오른쪽으로 나오게..
댓글목록
