안드로이드 개발 팁 #51 - 마크다운 텍스트를 HTML 텍스트로 변환한 후 스타일 적용 방법
마크다운 텍스트를 HTML 텍스트로 변환한 후 스타일 적용 방법
No. 51
23.10.11 (수) | Written by @dorian-mobileapp
시작하며…
스팀잇 포스트의 포맷은 마크다운 텍스트입니다. commonmark 라이브러리를 활용하여 이를 HTML 텍스트로 바꿀 수 있는데요. 이후 스타일 추가 적용이 필요할 수 있습니다. 오늘 포스트에서는 마크다운 텍스트를 HTML 텍스트로 변환한 후 스타일을 적용하는 방법에 대하여 정리해 봅니다.
필요 라이브러리
- jsoup: 지난 포스트 참고
마크다운 텍스트를 HTML 텍스트로 변환한 후 스타일 적용 방법
(1) 스타일을 정의하는 태그 문자열을 정의하세요.
val style = """
<style>
...
</style>
""".trimIndent()
(2) 마크다운 텍스트를 HTML 텍스트로 변환하세요. 보다 자세한 방법은 이전 포스트를 참고하세요.
val html = markdown.convertMarkdownToHtml()
(3) (1), (2)에서 정의한 문자열들을 웹뷰에 로딩하세요.
webView.loadData("${style}${html}}", "text/html; charset=utf-8", "UTF-8")
style 문자열 정의 예
스팀잇 포스트 내용 보여주는 화면 개발하면서 아래와 같이 스타일 문자열을 정의하였습니다. iframe, img, th, td, blockquote 태그들의 스타일을 커스터마이즈하였죠. 이에 대한 보다 자세한 설명은 추후 이 화면 관련 포스트에서 자세히 말씀 드리겠습니다.
val style = """
<style>
iframe { display: block; max-width: 100%; height: auto; }
img { display: block; max-width: 100%; height: auto; }
th { background-color: rgb(188, 188, 188) }
td { background-color: rgb(233, 233, 233) }
blockquote { border-left: 4px solid rgb(194, 194, 194); padding-left: 10px; margin-left: 0px; }
</style>
""".trimIndent()
참고 링크
지난 안드로이드 개발 팁
Layout provided by Steemit Enhancer hommage by ayogom
Posted through the ECblog app (https://blog.etain.club)
[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.
안녕하세요.
SteemitKorea팀에서 제공하는 'steemit-enhancer'를 사용해 주셔서 감사합니다. 개선 사항이 있으면 언제나 저에게 연락을 주시면 되고, 관심이 있으신 분들은 https://cafe.naver.com/steemitkorea/425 에서 받아보실 수 있습니다. 사용시 @응원해 가 포함이 되며, 악용시에는 모든 서비스에서 제외될 수 있음을 알려드립니다.
안녕하세요.
이 글은 SteemitKorea팀(@ayogom)님께서 저자이신 @dorian-mobileapp님을 응원하는 글입니다.
소정의 보팅을 해드렸습니다 ^^ 항상 좋은글 부탁드립니다
SteemitKorea팀에서는 보다 즐거운 steemit 생활을 위해 노력하고 있습니다.
이 글은 다음날 다시 한번 포스팅을 통해 소개 될 예정입니다. 감사합니다!
Thank you, friend!
I'm @steem.history, who is steem witness.
Thank you for witnessvoting for me.
please click it!
(Go to https://steemit.com/~witnesses and type fbslo at the bottom of the page)
The weight is reduced because of the lack of Voting Power. If you vote for me as a witness, you can get my little vote.
Upvoted! Thank you for supporting witness @jswit.