안드로이드 개발 팁 #47 - 마크다운 텍스트를 HTML 텍스트로 변환 방법

마크다운 텍스트를 HTML 텍스트로 변환 방법

---

시작하며…

스팀 앱을 주제로 사이드 프로젝트 진행 중인데, 정작 개발은 안 하고 자료 정리만 계속 하고 있네요. 포스트 화면 개발을 진행하면서 새로 배운 내용들이 좀 있고, 내용 정리를 할 필요가 있다고 해서 그렇게 되었어요. 이왕 하는 거 빨리 마치고 다시 개발을 시작할 수 있으면 좋겠어요.

오늘은 마크다운 텍스트를 HTML 텍스트로 변환하는 방법에 대해 정리합니다. 처음에는 오픈 소스로 공개된 마크다운 뷰를 사용하려 했지만, 유튜브 영상 보여주기 그리고 이미지 URL을 이미지로 변환하기 등의 추가 작업들이 필요했습니다. 마크다운 뷰 대신 마크다운 텍스트를 HTML 텍스트로 변환하여 웹뷰에 보여주기로 했습니다. 그래야 앞에 말씀드린 추가 작업들이 가능하니까요.

---

필요 라이브러리

• commonmark: 마크다운 텍스트를 HTML 텍스트로 변환 지원
• commonmark-ext-gfm-tables: 테이블 지원 기능 추가
• build.gradle 파일의 dependencies 블록에 라이브러리 추가 코드 (2023. 10. 04 기준)

dependencies {
    // ...
    implementation 'org.commonmark:commonmark:0.20.0'
    implementation 'org.commonmark:commonmark-ext-gfm-tables:0.20.0'
}

---

마크다운 텍스트를 HTML 텍스트로 변환하는 String 클래스의 확장 메소드

HTML 텍스트로 변환하기 위해 여러 종류의 객체들이 필요한데요. 변환 작업을 편리하게 하기 위해 String 클래스의 확장 메소드를 아래와 같이 정의하였습니다. 마크다운 텍스트를 담은 문자열 객체의 convertMarkdownToHtml() 메소드를 호출하면, HTML 텍스트가 리턴됩니다.

import org.commonmark.ext.gfm.tables.TablesExtension
import org.commonmark.node.Node
import org.commonmark.parser.Parser
import org.commonmark.renderer.html.HtmlRenderer

fun String.convertMarkdownToHtml(): String {
    val extensions = listOf(TablesExtension.create())
    val parser = Parser.builder().extensions(extensions).build()
    val rootNode: Node = parser.parse(this)
    val renderer = HtmlRenderer.builder().extensions(extensions).build()
    return renderer.render(rootNode)
}

---

참고 링크

• commonmark-java

---

지난 안드로이드 개발 팁

• #46 - HTTPS URL이 유튜브 사이트인지 판별 방법
• #45 - HTTPS URL의 내용이 이미지인지 판별
• #44 - 유튜브 URL로부터 플레이 시작 위치 읽는 방법
• #43 - 유튜브 URL로부터 비디오 ID 읽는 방법
• #42 - 문자열이 여러 개의 서브문자열들 중 하나로 시작하는 또는 끝나는지 판별하기
• #41 - 액티비티에 전체 화면 적용 방법 (린백 옵션)
• #40 - 웹뷰에서 구글 로그인 우회 방법
• #39 - 스크린 항상 키는 방법
• #38 - 핸들러를 코루틴으로 대체하기
• #37 - 내비게이션 활용하여 프래그먼트간 이동
• #36 - DB Browser for SQLite에서 쿼리 실행 방법
• #35 - DB Browser for SQLite 사용법
• #34 - SQLite 데이터베이스 도구 DB Browser for SQLite 다운로드
• #33 - adb 명령어 사용을 위한 PATH 환경 변수 설정
• #32 - 코틀린 언어로 구현한 확장 함수를 자바 코드에서 호출하는 방법
• #31 - UTC 시간을 지역 시간으로 변환하는 함수
• #30 - Collection, MutableCollection 연산 확장 함수 filter, count, indexOfFirst, sortWith, sortedWith
• #29 - 프로젝트에 벡터 이미지 추가하기
• #28 - JSON 자료를 데이터 클래스로 자동 변환하는 방법
• #27 - 페이스북 로그인이 안 되는 문제
• #26 - 레이아웃 XML 파일에 이모지 문자 넣는 방법
• #25 - TED permission 라이브러리를 활용한 권한 요청
• #24 - EditText 뷰에 텍스트 입력하고 0.5초 후 액션 설정
• #23 - Uri 객체로부터 읽은 파라메터에서 '+' 문자가 ' '로 바뀌어 있는 문제
• #22 - RxJava 활용하여 몇초 후 코드 실행
• #21 - 맥북 아이클라우드로 프로젝트 복사 후 빌드 안 되는 문제
• #20 - 툴바 정의 방법 (1) 타이틀 및 배경색 설정
• #19 - Index corrupted 오류
• #18 - 오래된 프로젝트의 build.gradle 파일 수정
• #17 - 뷰 바인딩 적용된 프래그먼트에 데이터 바인딩 적용 후 빌드시 발생하는 오류
• #16 - 특정 일이 속하는 주의 모든 날짜를 배열로 구하는 방법
• #15 - RecyclerView에 리스트를 로딩한 후 처리할 일 작성
• #14 - RecyclerView 뷰에서 항목 클릭시 뷰가 깜빡이는 문제
• #13 - 공통으로 사용할 색상 리소스 만들고 뷰에 적용
• #12 - 코틀린 언어 변환시 추가로 수정할 build.gradle 파일들
• #11 - 리스트/배열로부터 찾을 원소의 위치 읽기
• #10 - 앱의 다크 모드 진입 막는 방법
• #9 - 데이터 바인딩/뷰 바인딩 사용하지 않을 경우 자체적으로 만드는 Views 클래스
• #8 - TextView에 linear gradient color 적용하기
• #7 - 다이얼 화면 연결하기 위해 Activity 클래스의 확장 메소드 작성
• #6 - 웹 브라우저를 여는 확장 메소드 작성
• #5 - HTML 적용된 TextView에서 링크 클릭은 어떻게 구현?
• #4 - RxJava의 Observable, Single 객체의 기본 설정 수행 메소드 정의하기
• #3 - 특정 화면 이동시 다른 화면 모두 닫기
• #2 - HTML 이스케이핑 적용된 문자 풀어주기
• #1 - TextView로 HTML 내용 보여주기

---

Posted through the ECble app (https://ecble.etain.club)

Posted through the ECblog app (https://blog.etain.club)

Posted through the ECblog app (https://blog.etain.club)