Steem 글을 HTML 및 HTML 소스로 보여주는 페이지를 만들었습니다.(Steem to HTML page, source code)

2년 전
in kr

Mediteam.us의 댓글은 내부에 저장하지 않고 바로 steemit에서 불러와서 뿌려줍니다.

댓글에 마크다운을 쓰는 분들이 많아지다 보니, nodeJS에서 본문만 받아서 변환하던것을 어쩌다보니 브라우저 쪽에서도 작동시켜야해서, 이참에 그냥 페이지를 만들었습니다.

다른 사람이 쓴 글을 가져다 쓰는 것은 저작권 위반이 될 수 있으니, 본인이 쓰신 글을 외부 블로그에 옮기실 분들만 사용해주셨으면 합니다.

PHP, javascript 이용하시는 분들은 크게 어렵지 않은 내용이라 소스도 그냥 풀어둡니다.

 

사용하는 주소는 : https://junn.in/steem06_markdownToHTML.php

Github : https://github.com/junn279/steemjs_example/blob/master/steem06_markdownToHTML.php

이런 주소에서 ID는 junn, Permlink가 뒤에 steem-markdown....이 부분입니다. 넣고 Submit 버튼을 누르시면 됩니다.

 

몇군데만 설명하면

https://steemit.com/kr/@junn/steem-markdown-to-html-table-linebreak

에서 설명했던 Markdown Converter 사용과 SteemJS의 getContent 에 대한 예제가 되겠습니다.
깃헙예제와 아래에는 simplifiedAutoLink 를 추가했으나, 이경우 유튜브 동영상 바로 위에 링크(라이브러리가 알아서 추가해버린)에 의한 오타가 남아버려서 제 사이트의 소스에서는 빼놨습니다.

<script src="/jquery-3.3.1.min.js"></script>
<script src="https://cdn.rawgit.com/showdownjs/showdown/1.8.6/dist/showdown.min.js"></script>
<script src="//cdn.steemjs.com/lib/latest/steem.min.js"></script>

//중략

jQuery(document).ready(function($) 
        {
            var author = "<?=$id?>";
            var permlink = "<?=$permlink?>";
            steem.api.getContent(author,permlink, function(err, response)
            {
                console.log("Content", response);
                var converter = new showdown.Converter({
                    'tables':true,
                    'strikethrough':true,
                    'simpleLineBreaks':true,
                    'simplifiedAutoLink':true
                });
                var text = response.body,
                html_body = converter.makeHtml(text);
                html_body = changeYouTubeTag(imageSetting(html_body));
                $('#contents').html(html_body);
                $('#source').html(html_body);
            });
        });

JQuery는 CDN으로 하려고 했더니 브라우져에서 막는 듯 해서 다운받아서 쓰셔야합니다.

아래 글을 참조해보니 PHP를 사용하지 않고 독립된 html 파일로도 만들 수 있는 것 같습니다.

https://stackoverflow.com/questions/1961069/getting-value-get-or-post-variable-using-javascript

필요하신 분들은 유용하게 사용하시기 바랍니다.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
STEEMKR.COM IS SPONSORED BY
ADVERTISEMENT
Sort Order:  trending

안녕하세요 ㅎㅎ 최근 가입한 뉴비입니다 최신글 보고 방문했습니다 블로그로 옮길 때 많이 참고하도록 할게요 ㅎㅎ 팔로우랑 보팅 하고 가겠습니다!

·
  ·  2년 전

감사합니다. 도움이 되셨으면 좋겠습니다ㅎ

엑설런트입니다! 이걸 통해 html 변환 후에 깃헙에 올리면 정적 페이지 블로그를 바로 만들어낼수 있겠네용 멋집니다. 훔쳐갑니다. 활용도도 높구요.

·
  ·  2년 전

마크다운을 잘 몰라서 그 동안 워드프레스에서 복붙했었습니다ㅎ 스팀으로 블로그 입문하신 분들에게 약간의 도움이라도 되려나 모르겠습니다.

신기하네요.

·
  ·  2년 전

그저 누군가 만들어놓은 라이브러리를 이래저래 조합했을 뿐입니다ㅎ

유용한 기능을 만들어주셔서 감사합니다. 먼저 사용해보고 후기 올려드릴게요.

·
  ·  2년 전

후기를 쓰실 것도 없을듯한 간단한 페이지입니다ㅎ

오 정말 좋은 자료네요!! 한번 이용해봐야겠습니다 감사합니다~

·
  ·  2년 전

블로그에서 글들 잘 봤습니다 ㅎ저도 블록체인을 간단히나마 공부해보려는데 많은 도움이 될 것 같네요 ㅎ

헐 대박입니다. 유용하게 사용하겠습니다 ^ㅡ^

감사합니다. 유용하게 사용할 수 있을 것 같습니다.^^

오~ 멋집니다.
참고하도록 하겠습니다.

즐거운 설 연휴 보내시고 새해 복 많이 받으세요.

  ·  작년

글 잘읽었습니다 ㅎㅎ 제가 스팀잇을 통해 포스팅을 처음 해보는데 소스코드는 어떻게 올리는 건지 알려주세요!