Markdown嵌入RMarkdown的边框

huangapple
go评论105阅读模式
英文:

Border around Markdown embed in RMarkdown

问题

我有一些从这里创建的GitHub个人资料“卡片”，我正在将它们作为Markdown嵌入到pkgdown网站上的RMarkdown页面中。

如何添加边框到这些卡片呢？我在搜索中找到的都是关于如何使用CSS或HTML为图像添加边框，而不是嵌入式的内容。

或者，您也可以考虑更改它们的背景颜色，因为它们在白色背景的页面上可能不太可见。

谢谢。

英文:

I have a couple of Github profile "cards" created from here which I am embedding as Markdown in a RMarkdown page on a pkgdown website.

How would i go about adding a border to these? Anything i have found searching has been about using CSS or html to add borders to images rather than embeds like this.

Or alternatively change the background colour of them - they are white on a white page.

Thanks

答案1

得分: 2

你可以混合使用 markdown 和 html 代码，甚至在你的 RMarkdown 文档中使用 css 代码块来更改样式。在下面的文档中，我将指标卡放在一个带有 class=bordered 的 div 中，然后更改了 bordered 类的 border-style 属性：

  1. .bordered{
  2.   border-style: solid;
  3. }
  1. <div class="bordered">
  2.   ![](https://metrics.lecoq.io/davidaarmstrong?template=classic&amp;base=header%2C%20activity%2C%20community%2C%20repositories%2C%20metadata&amp;base.indepth=false&amp;base.hireable=false&amp;base.skip=false&amp;config.timezone=America%2FToronto)
  3. </div>

这是结果：

Markdown嵌入RMarkdown的边框

并排

要并排两个图像，你可以使用 flexbox 策略：

  1. .wrapper {
  2.   display: flex;
  3. }
  5. .left {
  6.   flex: 50%;
  7.   margin:15px; 
  8.   border-style: solid;
  9. }
  11. .right {
  12.   flex: 50%;
  13.   margin:15px; 
  14.   border-style: solid;
  15. }
  1. <div class="wrapper">
  2.   <div class="left">
  3.     ![](https://metrics.lecoq.io/davidaarmstrong?template=classic&amp;base=header%2C%20activity%2C%20community%2C%20repositories%2C%20metadata&amp;base.indepth=false&amp;base.hireable=false&amp;base.skip=false&amp;config.timezone=America%2FToronto)
  4.   </div>
  5.   <div class="right">
  6.     ![](https://metrics.lecoq.io/davidaarmstrong?template=classic&amp;base=header%2C%20activity%2C%20community%2C%20repositories%2C%20metadata&amp;base.indepth=false&amp;base.hireable=false&amp;base.skip=false&amp;config.timezone=America%2FToronto)
  7.   </div>
  8. </div>

这是结果：

Markdown嵌入RMarkdown的边框

英文:

You can mix markdown and html code and even use css code chunks in your RMarkdown document to change the styling. In the document below, I put the metrics card in a div with class=bordered and then changed the border-style attribute for the bordered class:

  1. title: &quot;test&quot;
  2. output: html_document
  3. editor_options: 
  4.   chunk_output_type: console
  5. ---
  6.     
  7. ```{css echo=FALSE}
  8. .bordered{
  9.   border-style: solid;
  10. }
  11. ```
  13. &lt;div class=&quot;bordered&quot;&gt;
  14. ![](https://metrics.lecoq.io/davidaarmstrong?template=classic&amp;base=header%2C%20activity%2C%20community%2C%20repositories%2C%20metadata&amp;base.indepth=false&amp;base.hireable=false&amp;base.skip=false&amp;config.timezone=America%2FToronto)
  15. &lt;/div&gt;

Here's the result:

Markdown嵌入RMarkdown的边框

side-by-side

To put two side-by-side: you could use a flexbox strategy:

  1. ```{css echo=FALSE}
  2. .wrapper {
  3.   display: flex;
  4. }
  6. .left {
  7.   flex: 50%;
  8.   margin:15px; 
  9.   border-style: solid;
  10. }
  12. .right {
  13.   flex: 50%;
  14.   margin:15px; 
  15.   border-style: solid;
  16. }
  17. ```
  19. &lt;div class=&quot;wrapper&quot;&gt;
  20. &lt;div class=&quot;left&quot;&gt;
  21. ![](https://metrics.lecoq.io/davidaarmstrong?template=classic&amp;base=header%2C%20activity%2C%20community%2C%20repositories%2C%20metadata&amp;base.indepth=false&amp;base.hireable=false&amp;base.skip=false&amp;config.timezone=America%2FToronto)
  22. &lt;/div&gt;
  23. &lt;div class=&quot;right&quot;&gt;
  24. ![](https://metrics.lecoq.io/davidaarmstrong?template=classic&amp;base=header%2C%20activity%2C%20community%2C%20repositories%2C%20metadata&amp;base.indepth=false&amp;base.hireable=false&amp;base.skip=false&amp;config.timezone=America%2FToronto)
  25. &lt;/div&gt;
  26. &lt;/div&gt;

Here's the result:

Markdown嵌入RMarkdown的边框

huangapple
  • 本文由 发表于 2023年5月14日 18:07:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/76246898.html
  • css
  • markdown
  • pkgdown
  • r
  • r-markdown
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定