47 lines
3.1 KiB
XML
47 lines
3.1 KiB
XML
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
|
|
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
|
<channel>
|
|
<title>Exhibiting code on Infusion</title>
|
|
<link>https://heydon.github.io/infusion/patterns/code/</link>
|
|
<description>Recent content in Exhibiting code on Infusion</description>
|
|
<generator>Hugo -- gohugo.io</generator>
|
|
<language>en-us</language>
|
|
|
|
<atom:link href="https://heydon.github.io/infusion/patterns/code/index.xml" rel="self" type="application/rss+xml" />
|
|
|
|
|
|
<item>
|
|
<title>Code blocks</title>
|
|
<link>https://heydon.github.io/infusion/patterns/code/code-blocks/</link>
|
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
|
|
|
<guid>https://heydon.github.io/infusion/patterns/code/code-blocks/</guid>
|
|
<description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
|
|
So, this&hellip;
|
|
```html &lt;button aria-pressed="false"toggle me&lt;/button ``` &hellip; will result in this:
|
|
&lt;button aria-pressed=&quot;false&quot;&gt;toggle me&lt;/button&gt; Note that the syntax highlighting uses a greyscale theme. Infusion is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.</description>
|
|
</item>
|
|
|
|
<item>
|
|
<title>CodePen embedding</title>
|
|
<link>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</link>
|
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
|
|
|
<guid>https://heydon.github.io/infusion/patterns/code/codepen-embedding/</guid>
|
|
<description>Sometimes just pictures of the pattern you&rsquo;re documenting aren&rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
|
|
Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&rsquo;s ID.
|
|
&#x7b;{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
|
|
</item>
|
|
|
|
<item>
|
|
<title>Writing inline demos</title>
|
|
<link>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</link>
|
|
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
|
|
|
|
<guid>https://heydon.github.io/infusion/patterns/code/writing-inline-demos/</guid>
|
|
<description>There are some issues with CodePen embedding , like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.
|
|
Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&rsquo;t have to worry about broken styles and global JS.</description>
|
|
</item>
|
|
|
|
</channel>
|
|
</rss> |