Rich Tabor

<h3>Comments that only render in the block editor</h3>
<p>I honestly enjoy drafting articles either locally in Ulysses, or on <a href="https://richtabor.com" rel="nofollow ugc">my blog</a> using the <a href="https://useiceberg.com/?utm_source=wp-org&utm_medium=markdown-comment-block&utm_campaign=readme-description" rel="nofollow ugc">Iceberg Editor</a>. While I do love Iceberg, once I publish an article I typically bring back the default Gutenberg experience — thus removing any comments I previously added.</p>
<p>Having the ability to add, and keep, any relevant editing comments within my posts, without rendering them on the front-end, means that I am freed up to mentally jot any idea down without thinking about it. It is simply natural and convenient.</p>
<p><a href="https://richtabor.com/markdown-comments/?utm_source=wp-org&utm_medium=markdown-comment-block&utm_campaign=readme-learnmore" rel="nofollow ugc">Learn more about Markdown Comment →</a></p>
<h3>What’s interesting about Markdown Comment:</h3>
<h4>1. Editor only</h4>
<p>The block only renders within the editor. For developers reading this, that means there’s no save function. I don’t want my unfinished ideas, reminders, and notes rendered within my post – even if they’re hidden by CSS.</p>
<h4>2. Helpful block transforms</h4>
<p>I added a couple transforms, to and from headings and paragraphs, and a raw shortcut when you type <code>%%</code> and hit the [space] key. This lets me quickly add comments, and even convert whole paragraphs or headings to a comment.</p>
<h4>3. Easily resolve comments</h4>
<p>To support that path towards simplicity, I wanted a method to quickly resolve — i.e. banish — a comment entirely. So, I added a toolbar control to quickly resolve the comment, removing the block entirely.</p>
<h4>4. No rich text support</h4>
<p>Comments need to have minimal impact on editing, and feel as natural as possible. That’s why there are no typical RichText controls (although you can still bold, italicize and add hyperlinks). And while you <em>can</em> change the color of the comment — there are no other typographic controls.</p>
<h4>5. Entirely CSS Variable ready</h4>
<p>Global styles and full site editing are opening the door for themes to be heavily powered by CSS variables. Blocks should be designed with that same mentality, which is exactly what I did here. I added simple CSS variables with fallbacks that are the default values. To further theme the comment, there’s no need to override any styles with classes, just write a few CSS variables.</p>


Markdown Comment Block

Add markdown inspired comments to posts that render only within the block editor.

pReya

<p>This is a plugin for WordPress to embed Markdown files from external web sources (e.g. GitHub, GitLab, etc) into WordPress content using the shortcode <code>[external_markdown]</code>. A possible use case for this is to show content from a single source of truth (like a GitHub repository) on your WordPress website.</p>
<h3>Features</h3>
<ul>
<li>Embed any publicly accessible markdown file from other websites</li>
<li>Uses the public and free <a href="https://docs.github.com/en/rest/reference/markdown" rel="nofollow ugc">GitHub API</a> to transform Markdown to HTML (there is a rate limit – so don’t overdo it)</li>
<li>Caching support (so you can configure how often the file is being fetched from the source – default is a <strong>once per hour</strong> maximum)</li>
<li>Customise the CSS class of the markdown container to adjust styles</li>
</ul>
<h3>Instructions / Examples</h3>
<p>Download and unpack or clone this repository into your <code>wp-content/plugins</code> folder, so the PHP file resides in <code>wp-content/plugins/external-markdown/external-markdown.php</code>.</p>
<p>If you use the Guttenberg editor, you need to add a “Shortcode” block first. If your’re using the classic editor, you can use the shortcode right away.</p>
<h4>Simple embed</h4>
<p>The <code>url</code> parameter takes the URL to the Markdown file you want to embed. Make sure to <a href="#attention-when-using-github-gitlab-etc" rel="nofollow ugc">use the “raw” URL when you use GitHub, GitLab, etc</a>.<br />
    <code>[external_markdown url="https://raw.githubusercontent.com/pReya/wordpress-external-markdown/main/README.md"]</code></p>
<h4>Adjust caching duration</h4>
<p>The <code>ttl</code> parameter controls how long the cached version is used, before it’s fetched again. The value is given in seconds. So 24 hours (24* 60 *60) result in a value of 86400.<br />
    <code>[external_markdown ttl=86400 url="https://raw.githubusercontent.com/pReya/wordpress-external-markdown/main/README.md"]</code></p>
<h4>Adjust container CSS class</h4>
<p>The <code>class</code> parameter takes your desired class name for the external markdown container. The default class name for the container is <code>class='external-markdown'</code>.<br />
    <code>[external_markdown class="my-classname" url="https://raw.githubusercontent.com/pReya/wordpress-external-markdown/main/README.md"]</code></p>
<h4>Attention when using GitHub, GitLab, etc.</h4>
<p>When embedding content from Git hosting services like GitHub or GitLab, you need to make sure to use the proper “raw” markdown URL. You can find this URL in the upper right corner of the web view.</p>
<h3>Attribution</h3>
<ul>
<li>This plugin was inspired by the great <a href="https://wordpress.org/plugins/documents-from-git/" rel="ugc">wordpress-markdown-git</a> plugin, which serves a similar purpose, but uses the Git provider APIs to fetch the raw Markdown files – which is a little more complicated than this approach here.</li>
</ul>


External Markdown

Working well

This is a plugin for Wordpress to embed Markdown files from external web sources (e.g. GitHub, GitLab, etc) into WordPress content.

Markdown Comment Block vs External Markdown