我刚开始使用 jekyll 写博客。我用markdown写我的帖子。现在，我想在我的帖子中包含一个 youtube 视频。我该怎么做？
另外，我不太喜欢 jekyll 默认提供的 pygments 高亮。无论如何我可以将其更改为其他样式吗？如果是的话，你能指点我一些不错的样式/插件吗？
【问题讨论】：
标签： ruby video markdown highlight jekyll
您应该能够将用于嵌入的 HTML 直接放入您的降价中。在视频下方，有一个“分享”按钮，点击它，然后是“嵌入”按钮，它应该给你一些看起来有点像：
<iframe width="420" height="315" src="http://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
只需将其复制并粘贴到您的帖子中，Markdown 预处理器不会触及它。
对于 Pygments，this repository 中有一大堆用于各种颜色主题的 CSS 样式表，您可以尝试使用它们。 （请注意，您必须将 .codehilite 替换为 .highlight 才能使用 Jekyll。）
【讨论】：
malformed XML: missing tag start 错误。似乎来自 allowfullscreen 属性。我尝试添加 allowfullscreen="true" 并编译但没有正确关闭 iframe 标记并吞下文档的其余部分。
<iframe width="420" height="315" src="//www.youtube.com/embed/w0K1wwSJZoc" frameborder="0" allowfullscreen="allowfullscreen">&nbsp;</iframe>（注意 iframe 标签之间的字符，添加它可以正确呈现关闭 iframe 标签）
我做了类似的事情，但就我而言，简单的复制和粘贴不起作用。错误信息如下：
REXML 无法解析此 XML/HTML：
为避免此错误，我从复制的源中删除了allowfullscreen，如下所示：
<iframe width="480" height="360" src="http://www.youtube.com/embed/WO82PoAczTc" frameborder="0"> </iframe>
在结束 </iframe> 之前添加一个空格很重要。
然后，我成功地将视频嵌入到我的网站中。
【讨论】：
allowfullscreen 帮助以显示第一个视频，但它隐藏了之后的所有内容（其他视频、文本、页脚......）。在结束 </iframe> 之前添加一个空格完成了这项工作。
allowfullscreen 更改为 allowfullscreen="allowfullscreen" 来制作 XHTML 对我有用。
allowfullscreen="1" 为我工作。似乎解析器只是不喜欢没有值的属性。
在我的情况下，问题已通过 jQuery 解决：
jQuery
$('.x-frame.video').each(function() {
$(this).after("<iframe class=\"video\" src=\"" + ($(this).attr('data-video')) + "\" frameborder=\"0\"></iframe>");
});
用法
<div class="x-frame video" data-video="http://player.vimeo.com/video/52302939"> </div>
注意<div> </div>之间需要空格
【讨论】：
可以在 Jekyll 中使用一个简单的插件生成插入 youtube 视频的 html 代码 如https://gist.github.com/1805814 中所述。
语法变得如此简单：
{% youtube oHg5SJYRHA0 %}
【讨论】：
WordPres 的一个更好的功能是您可以将 Youtube URL 粘贴到内容中（在新行上），然后 WordPress 会将其转换为嵌入代码。
以下代码对 Jekyll 执行相同的操作。只需将此代码放在您的页脚中（或使用 Jekyll 包含），所有带有 Youtube URL 的段落都会被 Vanilla JS 自动转换为响应式 Youtube 嵌入。
<style>
.videoWrapper {position: relative; padding-bottom: 56.333%; height: 0;}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
</style>
<script>
function getId(url) {
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[2].length == 11) {
return match[2];
} else {
return 'error';
}
}
function yt_url2embed() {
var p = document.getElementsByTagName('p');
for(var i = 0; i < p.length; i++) {
var pattern = /^((http|https|ftp):\/\/)/;
if(pattern.test(p[i].innerHTML)) {
var myId = getId(p[i].innerHTML);
p[i].innerHTML = '<div class="videoWrapper"><iframe width="720" height="420" src="https://www.youtube.com/embed/' + myId + '?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>';
}
}
}
yt_url2embed();
</script>
虽然只是将 HTML 代码添加到您的 Markdown 是一个非常好的（甚至可能更好）且有效的解决方案，但此解决方案可能对用户更友好。
(Source)
【讨论】：
您发现自己多久搜索一次“如何在 Markdown 中嵌入视频？”
虽然无法在 Markdown 中嵌入视频，但最好和最简单的方法是从视频中提取帧。为了更容易将视频添加到您的降价文件中，我认为下面的 jekyll 插件会对您有所帮助，它会自动解析图像块内的视频链接。
jekyll-spaceship - ? Jekyll 插件，为 table、mathjax、plantuml、emoji、youtube、vimeo、dailymotion 等提供强大的支持。
https://github.com/jeffreytse/jekyll-spaceship
目前，提供这些视频链接解析：
有两种方法可以在 Jekyll 博客页面中嵌入视频：
内联样式：
参考风格：
![][{reference}]
[{reference}]: {video-link}
然后，您成功地将视频嵌入到您的网站中。
???
【讨论】：