Checkbox Custom CSS 만들기 #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 함수 옵션등 잘 이용해서 만들어 봐야겠습니다.