查看要点的渲染输出?

时间:2012-05-23 09:31:26

标签: git github gist

我确定我昏暗,但是有可能查看要点的渲染输出吗?

这是我感兴趣的要点:https://gist.github.com/844752/420cc52eb4910fe8fa2bec9e13daab18b6230503

我在哪里可以看到它实际呈现的方式?

8 个答案:

答案 0 :(得分:53)

rawgit.com提供此服务。要使用rawgit.com,只需使用rawgit.com替换要查看的gist或github文件的原始视图的域。例如:

https://gist.githubusercontent.com/mbostock/844752/raw/index.html

https://rawgit.com/mbostock/844752/raw/index.html

https://raw.githubusercontent.com/caffinatedmonkey/Hello-World-PSP/master/main.cpp

https://rawgit.com/caffinatedmonkey/Hello-World-PSP/master/main.cpp

答案 1 :(得分:9)

RawGithub.com将允许您在Github上渲染任何内容,包括要点。两个例子:

答案 2 :(得分:7)

Mike Bostock提出了一个很酷的应用来渲染Gists:http://bl.ocks.org/844752/420cc52eb4910fe8fa2bec9e13daab18b6230503

不过,我很感兴趣这是如何在技术上完成的。 GitHub有一个很酷的API,您可以通过它来获取JSON数据:https://api.github.com/gists/844752/420cc52eb4910fe8fa2bec9e13daab18b6230503它包含文件及其原始内容。我不知道如何动态渲染它,就像它们是文件系统上的实际文件一样。

答案 3 :(得分:6)

我认为最近改变了呈现要点的方式。这是我找到的解决方案:

  • 转到http://rawgit.com/,粘贴您的要点的地址并获取原始html代码的地址 - 或点击Github中的原始按钮
  • 添加到网址:http://htmlpreview.github.io/?

实施例

答案 4 :(得分:2)

2020更新:RawGit关闭。替代方法和测试:

要将您的要点预览为呈现的HTML,请使用以下服务之一:

所有这些均已在GitHub上用HTML gist进行了测试,并于2020年7月开始工作。

测试

使用此要点的示例:

检查它是否仍然有效以及URL的外观:

rawgit.com (从2020年7月开始无效)

https://rawgit.com/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html

gist.githack.com

https://gist.githack.com/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html

警告:它将JavaScript注入您的页面!参见:

curl https://gist.githack.com/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html

输出:

<!-- Valid HTML Test -->
<!doctype html>
<html lang=en>
<meta charset=utf-8> 
<title>Valid HTML Test</title>
<script>
alert('It works');
</script>
<script async src='/cdn-cgi/bm/cv/2172558837/api.js'></script><script type="text/javascript">(function(){window['__CF$cv$params']={r:'5b1aaf571d8bf2c0',m:'65442fcb36a12a3fd4d99294f0ae0a2c6c071945-1594556076-1800-AdUTDXjrrqS1ZqgeCevOb/vrvZSZaBf8uXiIHtYhab+Pu1AhAHEnvoPv7d6apyJwU+p7FNPWY8VQAjdSpjC5/5JRJKo5Og1S5Qod6jctf3ECBmhA7mctVQJOrzVBXkf2fZrHHOVjSD5cezyUp1zDZeSLAYtov29CfJKdbN7/gstPjgYcF/FbgiA5tm4WJ/ToqDwoSGljZwlHIrqr9EdLCecSgQO1D+ASFBtWOduqNIx9',s:[0x603d28608f,0x9fc0e2444b],}})();</script>

最后两个脚本标记不是我的! 我注意到了这一点,因为HTML验证程序向我发出了警告,要求我给出完全有效的HTML(因此它不仅会注入代码,而且还会注入无效的代码...)

gitcdn.xyz

https://gitcdn.xyz/cdn/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html

似乎没有更改HTML:

curl -v https://gitcdn.xyz/cdn/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html

gistcdn.rawgit.org

https://gistcdn.rawgit.org/rsp/dd2481a75c1668846a752e24099ce020/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html

注意:该URL不像其他所有URL一样包含/raw/,因此如果手动构建该URL,很容易将其拼写错误。

htmlpreview.github.io

https://htmlpreview.github.io/?https://gist.githubusercontent.com/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html

警告:

它们似乎在以下方面有所不同:

  • 有些是代理,有些是在前端使用AJAX
  • 更改实际的HTML,例如注入脚本,请参阅上面的警告

文件完整性

我写了这个脚本来检查所提供HTML的SHA1和:

#!/bin/bash
for i in \
'https://gist.githubusercontent.com/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html' \
'https://gist.githack.com/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html' \
'https://gitcdn.xyz/cdn/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html' \
'https://gistcdn.rawgit.org/rsp/dd2481a75c1668846a752e24099ce020/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html' \
'https://htmlpreview.github.io/?https://gist.githubusercontent.com/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html' \
;do
n=`echo $i | sed 's|^[a-z:]*//||; s|/.*||'`
s=`curl -s $i | shasum`
echo $s $n
done

如有需要,可以随时使用它来测试自己的要旨的完整性。 请记住,即使其中一个代理现在不立即注入任何代码或不干扰您的代码,这也不意味着它永远也不会这样做。

我的结果是:

7a785588d5806469a7a9256968f82257accd7183 - gist.githubusercontent.com
809819224097b5f116b63fd6019cb490005d1ff8 - gist.githack.com
7a785588d5806469a7a9256968f82257accd7183 - gitcdn.xyz
7a785588d5806469a7a9256968f82257accd7183 - gistcdn.gistcdn.rawgit.org
5069f27b01308f3cf71c9d7f3a5c924e3a91b243 - htmlpreview.github.io

第一个是原始的,因此看起来:

  • gitcdn.xyz和rawgit.org提供原始文件
  • githack.com 将脚本注入您的页面!(确实是git hack ...)
  • htmlpreview.github.io在前端上工作,因此提供了一个不同的页面,该页面使用前端上的逻辑加载和显示要点(我想知道它是否适用于相对链接和图像-我稍后必须对其进行测试)。

关于htmlpreview.github.io

的说明

有趣的是,它可以使用另一个服务,JSONP代理jsonp.afeld.me来工作,并且不直接从GitHub加载您的要领,而是将其加载为: https://jsonp.afeld.me/?url=https://gist.githubusercontent.com/rsp/dd2481a75c1668846a752e24099ce020/raw/233e4d9d5388fc087785ff2d6f63ce232302d255/test.html

其他想法

我只是想知道是否可以以某种方式使gh页与gist一起使用(因为gist可以作为回购来结帐)。我将对其进行测试并编写更新。更新:我无法使其工作。我也不能从要点部署到Netlify。

答案 5 :(得分:1)

据我所知,gist不提供执行环境,但您可以轻松地将其粘贴到jsfiddle

答案 6 :(得分:0)

Gist渲染输出(当前更新要点后,不是实时预览)。

仅适用于正确的文件扩展名。

例如,如果您的文件格式为MediaWiki,则必须将文件名编辑为somefile.mediawiki

答案 7 :(得分:0)

你可以在GitHub中做到这一点。我只是使用评论部分,因为它已经拥有自己的“预览”选项,当然还支持“使用Markdown设置样式”。