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

junn (61)in #kr • 6 years ago (edited)

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

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

#kr-dev #steemit #steem