我刚开始用jekyll写博客。我用markdown写我的帖子。现在,我想在我的帖子里包含一个youtube视频。我该怎么做呢?另外,我不太喜欢jekyll默认提供的pygments高亮显示。有没有什么方法可以让我把它改成其他的样式?如果有的话,你能给我介绍一些不错的样式/插件吗?
pnwntuvh1#
你应该能够把HTML直接嵌入到你的markdown中。在视频下面,有一个“分享”按钮,点击这个,然后点击“嵌入”按钮,它应该会给予你一个看起来有点像:
<iframe width="420" height="315" src="http://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
只要复制并粘贴到你的帖子中,Markdown预处理程序不会碰它。对于Pygments,this repository中有一大堆用于各种颜色主题的CSS样式表,您可以尝试使用它们。(请注意,您必须将.codehilite替换为.highlight,这些样式表才能在Jekyll中使用。)
.codehilite
.highlight
jm81lzqq2#
我做了类似的事情,但在我的情况下,简单的复制和粘贴不起作用。错误信息如下:REXML无法解析此XML/HTML:为了避免这个错误,我删除了allowfullscreen从复制的源代码如下:
allowfullscreen
<iframe width="480" height="360" src="http://www.youtube.com/embed/WO82PoAczTc" frameborder="0"> </iframe>
在结束字符</iframe>之前添加一个空格是很重要的。然后,我成功地将视频嵌入到我的网站。
</iframe>
um6iljoc3#
插入youtube视频的html代码可以在Jekyll中使用https://gist.github.com/1805814中描述的一个简单插件生成。语法变得非常简单:
{% youtube oHg5SJYRHA0 %}
i86rm4rw4#
在我的例子中,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>之间需要有空格
<div> </div>
kmbjn2e35#
WordPres的一个更好的特性是,你可以只在内容中粘贴一个Youtube URL(在新的一行上),然后WordPress将其转换为嵌入代码。下面的代码对Jekyll做了同样的事情。只要把这段代码放在页脚中(或者使用Jekyll include),所有只包含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)(英文)
6rvt4ljy6#
您经常在Google上搜索“如何在减价中嵌入视频?”虽然在markdown中嵌入视频是不可能的,但最好也是最简单的方法是从视频中提取一个帧。为了更容易地将视频添加到markdown文件中,我想下面的jekyll插件会帮助你,它会自动解析图像块中的视频链接。jekyll-spuberate-🚀一个为table,mathjax,plantuml,emoji,youtube,vimeo,dailymotion等提供强大支持的Jekyll插件。https://github.com/jeffreytse/jekyll-spaceship现在,提供了这些视频链接解析:
有两种方法可以在您的Jekyll博客页面中嵌入视频:内嵌样式:
![]({video-link})
参考样式:
![][{reference}] [{reference}]: {video-link}
然后,您成功地将视频嵌入到您的站点中。
n7taea2i7#
在时下:
<iframe width="840" height="473" src="https://www.youtube.com/embed/IQf-vtIC-Uc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
或者右键单击浏览器中的视频并复制过去的嵌入代码。
7条答案
按热度按时间pnwntuvh1#
你应该能够把HTML直接嵌入到你的markdown中。在视频下面,有一个“分享”按钮,点击这个,然后点击“嵌入”按钮,它应该会给予你一个看起来有点像:
只要复制并粘贴到你的帖子中,Markdown预处理程序不会碰它。
对于Pygments,this repository中有一大堆用于各种颜色主题的CSS样式表,您可以尝试使用它们。(请注意,您必须将
.codehilite
替换为.highlight
,这些样式表才能在Jekyll中使用。)jm81lzqq2#
我做了类似的事情,但在我的情况下,简单的复制和粘贴不起作用。错误信息如下:
REXML无法解析此XML/HTML:
为了避免这个错误,我删除了
allowfullscreen
从复制的源代码如下:在结束字符
</iframe>
之前添加一个空格是很重要的。然后,我成功地将视频嵌入到我的网站。
um6iljoc3#
插入youtube视频的html代码可以在Jekyll中使用https://gist.github.com/1805814中描述的一个简单插件生成。
语法变得非常简单:
i86rm4rw4#
在我的例子中,jQuery已经解决了这个问题:
jQuery查询器
用法
请注意,
<div> </div>
之间需要有空格kmbjn2e35#
WordPres的一个更好的特性是,你可以只在内容中粘贴一个Youtube URL(在新的一行上),然后WordPress将其转换为嵌入代码。
下面的代码对Jekyll做了同样的事情。只要把这段代码放在页脚中(或者使用Jekyll include),所有只包含Youtube URL的段落都会被Vanilla JS自动转换为响应性的Youtube嵌入。
虽然仅仅将HTML代码添加到Markdown是一个非常好(甚至更好)和有效的解决方案,但这个解决方案可能更用户友好。
(Source)(英文)
6rvt4ljy6#
您经常在Google上搜索“如何在减价中嵌入视频?”
虽然在markdown中嵌入视频是不可能的,但最好也是最简单的方法是从视频中提取一个帧。为了更容易地将视频添加到markdown文件中,我想下面的jekyll插件会帮助你,它会自动解析图像块中的视频链接。
jekyll-spuberate-🚀一个为table,mathjax,plantuml,emoji,youtube,vimeo,dailymotion等提供强大支持的Jekyll插件。
https://github.com/jeffreytse/jekyll-spaceship
现在,提供了这些视频链接解析:
有两种方法可以在您的Jekyll博客页面中嵌入视频:
内嵌样式:
参考样式:
然后,您成功地将视频嵌入到您的站点中。
n7taea2i7#
在时下:
或者
右键单击浏览器中的视频并复制过去的嵌入代码。