Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]

Checkbox Custom CSS 만들기 #2 > 자유게시판

본문 바로가기
사이트 내 전체검색

자유게시판

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

 

추천0 비추천0

댓글목록

profile_image

아파치님의 댓글

아파치 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 us 아이피 (173.♡.♡.136) 작성일

덕분에 아파치존 회원님들께서 좋은 에디터 쓸수 있게 되겠습니다......ㅎㅎ

Total 386건 15 페이지
자유게시판 목록
번호 제목 글쓴이 조회 추천 비추천 날짜
176 정보 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12564 2 0 11-01
175 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13564 2 0 11-23
174 토픽
Rocky Linux 댓글6
마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 19008 0 0 12-11
173 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14511 0 0 01-04
172 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15976 1 0 01-25
171 정보 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 17122 1 0 02-11
170 제보 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 20884 1 0 03-14
169 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 20503 2 0 04-19
168 유머 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 20145 1 0 07-30
167 정보 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18099 1 0 08-05
166 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18245 2 0 08-15
165 제보 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 17288 3 0 08-26
164 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 18049 1 0 08-31
163 제보 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15718 1 0 09-06
162 토픽 마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 17118 3 0 09-14

검색

회원로그인

회원가입
QnA nanoomihost. dnsever. dnszi.

사이트 정보

포인트 정책
포인트 순위
사이트명 : 아파치존
개인정보관리책임자 : JOO SUNG

접속자집계

오늘
8,006
어제
12,302
최대
176,238
전체
4,330,633
Copyright © apachezone.com. All rights reserved.