토픽 Checkbox Custom CSS 만들기 #2
페이지 정보
(47.♡.♡.2)본문
<ul data-marker="*">
<li class="vditor-task"><input checked="" disabled="" type="checkbox"> 发布 Sym</li>
<li class="vditor-task"><input checked="" disabled="" type="checkbox"> 发布 Solo</li>
<li class="vditor-task"><input disabled="" type="checkbox"> 预约牙医</li>
</ul>
마크다운 에디터에서의 기본 출력입니다.
* [ ]
* [x]
+ [ ]
+ [x]
- [ ]
- [x]
위와 같은 마크다운 문법에 따라 출력이 data-marker="*, +, -" 에 따라 아래와 같이 중간에 추가를 할 수 있다면 다양한 표현이 가능할 것 같습니다.
<ul data-marker="+">
<li class="vditor-task">
<label class="vditor-task-switcher">
<input type="checkbox" disabled=""><span class="vditor-task-label">Default switcher state</span>
</label>
</li>
<li class="vditor-task">
<label class="vditor-task-switcher">
<input type="checkbox" checked="" disabled=""><span class="vditor-task-label">Checked switcher state</span>
</label>
</li>
</ul>
REGEX로 가능할지 모르겠지만, 해당 UL[data-markert="+"] 를 찾아서 각 li 안의 input 태그를 label로 감싸고, 텍스트를 span으로 감싸줘야 하는 식이네요..
CSS
.vditor-task-label {
display: inline-block;
padding-left: var(--guter);
color: #9aa6bf;
vertical-align: text-top;
}
.vditor-task-label::before,
.vditor-task-label::after {
transition: all 0.2s ease-in-out;
}
.vditor-task-label::before {
content: '';
display: block;
width: var(--input-size);
height: var(--input-size);
border: var(--border-size-box) solid var(--color-default);
position: absolute;
top: -3px;
left: 0;
transform: rotate(0deg) scale(1);
}
.vditor-task-label:hover::before {
border-color: var(--color-active);
}
li.vditor-task .vditor-task-switcher .vditor-task-label {
padding-left: 45px;
}
li.vditor-task .vditor-task-switcher .vditor-task-label::before {
content: '';
width: 36px;
height: 20px;
border-radius: 20px;
top: -2px;
}
li.vditor-task .vditor-task-switcher .vditor-task-label::after {
content: '';
border-radius: 4px;
width: 6px;
height: 12px;
background-color: var(--color-default);
position: absolute;
top: 2px;
left: 7px;
}
li.vditor-task .vditor-task-switcher > input:checked + .vditor-task-label::before {
background-color: var(--color-active);
border-color: var(--color-active);
}
li.vditor-task .vditor-task-switcher > input:checked + .vditor-task-label::after {
background-color: #fff;
left: 24px;
}
Custom Renderer를 javascript로 처리하는 것 보다.. 마크다운 엔진(Golang)을 수정하는 것이 더 빠르겠네요.
var headingLevel = " 123456"
func (r *HtmlRenderer) renderHeading(node *ast.Node, entering bool) ast.WalkStatus {
if entering {
r.Newline()
level := headingLevel[node.HeadingLevel : node.HeadingLevel+1]
r.WriteString("<h" + level) // <h2
id := r.headingID(node) // 헤딩텍스트
if r.Option.ToC || r.Option.HeadingID { // id="헤딩텍스트"
r.WriteString(" id=\"" + id + "\"")
}
r.WriteString(">") // >
if r.Option.HeadingAnchor {
// <a id="vditorAnchor-헤딩텍스트" class="vditor-anchor" href="#헤딩텍스트">
r.tag("a", [][]string{{"id", "vditorAnchor-" + id}, {"class", "vditor-anchor"}, {"href", "#" + id}}, false)
// <svg .... </svg>
r.WriteString(`<svg viewBox="0 0 16 16" version="1.1" width="16" height="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`)
// </a>
r.tag("/a", nil, false)
}
} else {
r.WriteString("</h" + headingLevel[node.HeadingLevel:node.HeadingLevel+1] + ">")
r.Newline()
}
return ast.WalkContinue
}
func (r *HtmlRenderer) renderHeadingC8hMarker(node *ast.Node, entering bool) ast.WalkStatus {
return ast.WalkStop
}
func (r *HtmlRenderer) renderList(node *ast.Node, entering bool) ast.WalkStatus {
tag := "ul"
if 1 == node.ListData.Typ || (3 == node.ListData.Typ && 0 == node.ListData.BulletChar) {
tag = "ol"
}
if entering {
r.Newline()
var attrs [][]string
if r.Option.RenderListMarker {
switch node.ListData.Typ {
case 0:
attrs = append(attrs, []string{"data-marker", string(node.Marker)})
case 1:
attrs = append(attrs, []string{"data-marker", strconv.Itoa(node.Num) + string(node.ListData.Delimiter)})
case 3:
if 0 == node.ListData.BulletChar {
attrs = append(attrs, []string{"data-marker", strconv.Itoa(node.Num) + string(node.ListData.Delimiter)})
} else {
attrs = append(attrs, []string{"data-marker", string(node.Marker)})
}
}
}
if 0 == node.BulletChar && 1 != node.Start {
attrs = append(attrs, []string{"start", strconv.Itoa(node.Start)})
}
r.tag(tag, attrs, false)
r.Newline()
} else {
r.Newline()
r.tag("/"+tag, nil, false)
r.Newline()
}
return ast.WalkContinue
}
func (r *HtmlRenderer) renderListItem(node *ast.Node, entering bool) ast.WalkStatus {
if entering {
if 3 == node.ListData.Typ && "" != r.Option.GFMTaskListItemClass &&
nil != node.FirstChild && nil != node.FirstChild.FirstChild && ast.NodeTaskListItemMarker == node.FirstChild.FirstChild.Type {
r.tag("li", [][]string{{"class", r.Option.GFMTaskListItemClass}}, false)
} else {
r.tag("li", nil, false)
}
} else {
r.tag("/li", nil, false)
r.Newline()
}
return ast.WalkContinue
}
func (r *HtmlRenderer) renderTaskListItemMarker(node *ast.Node, entering bool) ast.WalkStatus {
if entering {
var attrs [][]string
if node.TaskListItemChecked {
attrs = append(attrs, []string{"checked", ""})
}
attrs = append(attrs, []string{"disabled", ""}, []string{"type", "checkbox"})
r.tag("input", attrs, true)
}
return ast.WalkContinue
}
코드하이라이트에 Go(lang)이 빠져 있네요.
정 안되면 Go 도 조금만 검색해 보면, 필요한 것은 수정이 가능할 것 같습니다.
renderHeading 함수는 2번 불러지는 것 같습니다.
## 헤딩텍스트 일때..
level은 2이고
id는 헤딩텍스트 이고..
r.tag함수 r.WriteString 함수 옵션등 잘 이용해서 만들어 봐야겠습니다.
추천0 비추천0
댓글목록
