从Gitalk到Github Markdown的选用

gitalk_index

gitalk是一款借助github issue构建的博客评论的插件。它合理的利用应该是：当你在github上开源了一套blog系统，你部署一套自用或者作为demo上线时，可以直接将附属的issue模块作为评论引入你的网站。

如何得到自己的gittalk

申请自己的app

到这个页面去创建自己的app：

1.app name就是仓库的名字，这是issue依附的目标，没有就新建一个。不能乱填否则评论模块调用的时候404。  2.认证回调链接跟网站域名一致就好。

整合到目标页面

在目标页面放一个div比如

  <div id="gitalk-container"></div>

引入样式和脚本

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
  <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

脚本配置参数进行渲染

  const gitalk = new Gitalk({
    clientID: '申请的app得到id',
    clientSecret: '申请app得到的secret',
    repo: 'issue依附的仓库名称',
    owner: '仓库所有者名称',
    admin: ['与仓库所有者一致'],
    id: "当前页面标识，通常为文章id",
    distractionFreeMode: false
})
gitalk.render('gitalk-container');

从此解决了我博客重构遗留的评论和留言块没做的问题。

从gitalk到借用github markdown接口

gitalk是支持md语法的，现在到处都是md的身影，清新简洁，我原来用ueditor每次排版校对都花很多时间。那能不能顺手把md用上？

markdown编辑器的选择

md选编辑器主要两种，在线免费版和桌面IDE+插件版，可以看看这篇markdown 编辑器调研参考选择。在线版本我推荐Editor.md。桌面客户端推荐vs code，都很好用。

markdown的解析

markdown要用在自己做的博客里最大的问题不是编辑，而是解析，不能render成html再好也干瞪眼。网友推荐的几个js解析器都不喜欢。然后我就想到了gitalk支持的md解析和预览都跟官方page极为相似，怎么实现的呢？

network一看，发现了github官方的markdown api。用postman发过去，不需要认证直接给text就返回html了。

整合前先做个html模拟可行性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>gitmd test</title>
</head>
<body>
    <textarea id="source"></textarea><br>
    <button id="getMd">GetMD</button><br>
    <hr>
    <div id="content" class="gt-container markdown-body"></div>
</body>
<link href="https://unpkg.com/primer/build/build.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function(){
        $('#getMd').click(function(){
            $.ajax({
                url:"https://api.github.com/markdown",
                type:"POST",
                data: JSON.stringify({
                    "text": $('#source').val()
                }),
                dataType:"html",
                success:function(data){
                    $('#content').html(data)
                }
            });
        });
    });
</script>
</html>

效果非常nice，那么我只需要用vs code编辑文章，然后利用这个接口github就给我render回来了。

注意：

1.这里我页面渲染这部分render好的html还是沿用了gitalk截取的样式，是与github官方高度相似但并非官方的。gitalk的作者好像说是这个项目。  2.后面我找到了据说是Jekyll博客在用的高仿github pages样式的项目。  3.如果是Hexo这种静态博客本身会借用github pages样式，会跟gitalk这小块样式冲突，要处理css优先级。

其他问题

1.github的这个转换接口是不支持流程图和公式的，以github的体量，大家用起来也没有太大这方面需求，me too。  2.不过公式的话可以用这个网址去生成转换,然后选svg，在底部框中得到链接原，svg本身就是代码。  3.markdown语法对图片非常不友好，很多网友的用法中都夹杂了html标签，充满了妥协。  4.跟原博客样式冲突的问题，我还的花点时间分隔优先级。 

从GITalk到Github Markdown