본문 바로가기

마크다운3

Markdown Viewer for Multiple Documents and Loader(배열이용) 랜더링 배경 연동 규격서나 다양한 정보를 모아놓은 자료실을 만들고 있다. 마크다운 정보를 DB에 넣고 자료를 관리하여 홈페이지에 내용을 띄울때는 자동으로 html로 변환하는 내용이였다. 하지만 바뀐 내용으로 정보의 양은 많지 않고 view ejs 부분 내용만 바꾸면 되기 때문에 서버를 재부팅할 필요없어 그냥 프로젝트에 정보를 넣어놓는 방식으로 바꾸기로 하였다. 그러나 ejs를 사용하면서 라우터 문제나 한 페이지 뷰를 만들기 위해서 프로젝트 구조상 index.ejs, js등 총 4개의 페이지를 새로 만들어야 한다는 문제점이 발생하였다. 만일 이 문제를 해결하지 않는다면 자료실에 1개의 내용을 추가한다면 4개의 페이지를 추가하거나 수정해야 한다는 문제점이 있어 .md 파일을 미리 만들어 놓고 자료실 페이지에서 이 .. 2023. 9. 11.
자바스크립트 마크다운 검색창 만들기 #in 에 마크다운을 작성하게 되면 #out에 htm로 자동 변환되는 상황에서 검색창을 입력하여 내가 원하는 단어를 찾는 간단한 Javascript이용하여 쉽게 만들 수 있을거라고 생각하였다. 하지만 만들면서 여러 문제점이 발생하였다. 화면에 표출되는 #out 부분의 제목 부분이 #, ##, ### 과 같이 해시를 사용하여 이상한 반복이 발생하는 경우도 있고 또는 #out 부분이 없어지거나 #in 마크다운 내용으로 바뀌는 경우등 많은 문제점들이 발생하였다. 기본 HTML 틀 # News Title 1 ## Subheading 1 ### Subheading 1.1 # Another topic 이전 자동 목록 만들기와 구조는 유사하다. 전체코드 # News Title 1 ## Subheading 1 ### .. 2023. 9. 8.
자바스크립트 이용한 마크다운 자동 목차 만들기 구현목표 내가 만들고자 하는 것은 마크업언어로 #in(textarea) 에 작성을 하면 #out에 html로 자동 변환되고 여기서 변환된 #out의 html 문법을 보고 목차를 자동으로 만드는게 목표이다. 작업을 하면서 구글에 많은 티스토리 블로그 자동 목차만들기를 활용해서 사용하면 되겠다고 생각하였다. 여기서는 자동목차 만들기만 확인할것이다. html 기본 구조 # 뉴스 제목 1 ## 부제목 1 ### 소제목 1.1 # 또 다른 주제 다운로드 Markdown Markdown HTML ×> 위는 기본적인 html의 뼈대이다. 생략된 css난 html 부분이 많이있다. (참고용) 결과페이지 미리보기 자바스크립트 전체 $(document).ready(function () { // 여기에 Markdown 콘텐.. 2023. 9. 7.