Java and Cloud content, by the community for the community
We have two editor versions. If you'd prefer to edit title and tags etc. as separate fields, switch to the "rich + markdown" option in /settings/customization. Otherwise, continue:
Custom variables set for each post, located between the triple-dashed lines in your editor. Here is a list of possibilities:
Below are some examples of commonly used markdown syntax. If you want to dive deeper, check out this cheat sheet.
Italics: *asterisks* or _underscores_
Bold: **double asterisks** or __double underscores__
I'm an inline link: [I'm an inline link](put-link-here)
Anchored links (For things like a Table of Contents)
## Table Of Contents * [Chapter 1](#chapter-1) * [Chapter 2](#chapter-2) ### Chapter 1 <a name="chapter-1"></a>
When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page.

figcaption
tag!Add a header to your post with this syntax:
# One '#' for a h1 header
## Two '#'s for a h2 header
...
###### Six '#'s for a h6 header
Add some hidden notes/comments to your article with this syntax:
<!-- This won't show up in the content! -->
We support native Liquid tags in our editor, but have created our own custom tags listed below:
All you need is the full link of the article:
{% link https://thejavacafe.com/kazz/boost-your-productivity-using-markdown-1be %}
You can also use the slug like this:
{% link kazz/boost-your-productivity-using-markdown-1be %}
You can also use the alias post instead of link like this:
{% post https://thejavacafe.com/kazz/boost-your-productivity-using-markdown-1be %}
or this:
{% post kazz/boost-your-productivity-using-markdown-1be %}
All you need is the The Java Cafe username:
{% user jess %}
All you need is the tag name:
{% tag git %}
All you need is the
ID
at the end of a comment URL. To get the comment link, click either the timestamp or the menu button in the top right corner on a comment and then click "Permalink". Here's an example:
{% comment 2d1a %}
All you need is the full link of the podcast episode:
{% podcast https://thejavacafe.com/basecspodcast/s2e2--queues-irl %}
All you need is the full link of the listing:
{% listing https://thejavacafe.com/listings/collabs/dev-is-open-source-823 %}
You can also use the category and slug like this:
{% listing collabs/dev-is-open-source-823 %}
Note: Expired listings will raise an error. Make sure the listing is published or recently bumped.
You can embed a details HTML element by using details, spoiler, or collapsible. The summary will be what the dropdown title displays. The content will be the text hidden behind the dropdown. This is great for when you want to hide text (i.e. answers to questions) behind a user action/intent (i.e. a click).
{% details summary %} content {% enddetails %}
{% spoiler summary %} content {% endspoiler %}
{% collapsible summary %} content {% endcollapsible %}
Using the Twitter Liquid tag will allow the tweet to pre-render from the server, providing your reader with a better experience. All you need is the tweet
id
from the url.
{% twitter 834439977220112384 %}
Using the Twitter Timeline Liquid tag will allow the Twitter Timeline to pre-render from the server. All you need is the Twitter Timeline
link
.
{% twitter_timeline https://twitter.com/username/timelines/834439977220112384 %}
All you need is the Glitch project slug
{% glitch earthy-course %}
There are several optional attributes you can use in your tag, just add them after the id, separated by spaces.
app
{% glitch earthy-course app %}
code
{% glitch earthy-course code %}
preview-first
{% glitch earthy-course preview-first %}
no-attribution
{% glitch earthy-course no-attribution %}
no-files
{% glitch earthy-course no-files %}
file
{% glitch earthy-course file=script.js %}
All you need is the GitHub username and repo:
{% github forem/forem %}
no-readme
{% github forem/forem no-readme %}
All you need is the GitHub issue, PR or comment URL:
{% github https://github.com/forem/forem/issues/9 %}
All you need is the gist link:
{% gist https://gist.github.com/CristinaSolana/1885435 %}
Single File Embed
You can choose to embed a single gist file.
{% gist https://gist.github.com/CristinaSolana/1885435 file=gistfile1.md %}
Specific Version Embed
You can choose to embed a specific version of a gist file. All you need
the link and the commit hash for that specific version.
The format is {% gist [gist-link]/[commit-hash] %}
e.g.
{% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 %}
Specific Version File Embed
You can choose to embed a specific version of a gist file. All you need
the link, the filename and the commit hash for that specific version .
The format is {% gist [gist-link]/[commit-hash] file=[filename] %}
e.g.
{% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 file=Images.tmpl %}
All you need is the GitPitch link:
{% gitpitch https://gitpitch.com/gitpitch/in-60-seconds %}
All you need is the id
from the URL.
{% youtube dQw4w9WgXcQ %}
{% vimeo 193110695 %}
{% twitch ClumsyPrettiestOilLitFam %}
Just enter the full URL of the Medium article you are trying to embed.
{% medium https://medium.com/s/story/boba-science-how-can-i-drink-a-bubble-tea-to-ensure-that-i-dont-finish-the-tea-before-the-bobas-7fc5fd0e442d %}
All you need is the SlideShare key
:
{% slideshare rdOzN9kr1yK5eE %}
All you need is the full CodePen link
, ending in the pen ID code, as follows:
{% codepen https://codepen.io/twhite96/pen/XKqrJX %}
default-tab
{% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}
To create a runnable kotlin snippet, create a Kotlin Snippet at https://play.kotlinlang.org
Go to Share
dialog and copy the full link
from the Medium
tab. Use it as follows:
{% kotlin https://pl.kotl.in/owreUFFUG?theme=darcula&from=3&to=6&readOnly=true %}
Put executable code within a runkit liquid block, as follows:
{% runkit
// hidden setup JavaScript code goes in this preamble area
const hiddenVar = 42
%}
// visible, reader-editable JavaScript code goes here
console.log(hiddenVar)
{% endrunkit %}
Place your mathematical expression within a KaTeX liquid block, as follows:
{% katex %}
c = \pm\sqrt{a^2 + b^2}
{% endkatex %}
To render KaTeX inline add the "inline" option:
{% katex inline %}
c = \pm\sqrt{a^2 + b^2}
{% endkatex %}
All you need is the ID of the Stackblitz:
{% stackblitz ball-demo %}
Default view
{% stackblitz ball-demo view=preview %}
Default file
{% stackblitz ball-demo file=style.css %}
All you need is the ID of the Sandbox:
{% codesandbox ppxnl191zx %}
Of CodeSandbox's many optional attributes, the following are supported by using them in your tag, just add them after the id, separated by spaces.
initialpath
{% codesandbox ppxnl191zx initialpath=/initial/load/path %}
module
{% codesandbox ppxnl191zx module=/path/to/module %}
runonclick
1
{% codesandbox ppxnl191zx runonclick=1 %}
All you need is the full JSFiddle link
, ending in the fiddle ID code, as follows:
{% jsfiddle https://jsfiddle.net/link2twenty/v2kx9jcd %}
Custom tabs
{% jsfiddle https://jsfiddle.net/webdevem/Q8KVC result,html,css %}
To use JSitor liquid tag you can use the JSitor full link
, with or without the parameters
{% jsitor https://jsitor.com/embed/B7FQ5tHbY %}
{% jsitor https://jsitor.com/embed/B7FQ5tHbY?html&js&css&result&light %}
Other options to use JSitor liquid tag is just by its ID, you can add it with or without the parameters
{% jsitor B7FQ5tHbY %}
{% jsitor B7FQ5tHbY?html&js&css&result&light %}
All you need is the URL after the domain name:
{% replit @WigWog/PositiveFineOpensource %}
Visualize your AWS Serverless Application Model templates with Stackery's visualizer embed
All you need is the repository owner, repository name, and branch that you would like visualized
{% stackery deeheber lambda-layer-example master %}
The repository must be a public GitHub repository and have a valid AWS SAM template in the project root titled template.yaml
All you need is the share URL for your sandbox. You can get the share URL by clicking the "Share" button in the top right when the sandbox is open.
{% nexttech https://nt.dev/s/6ba1fffbd09e %}
All you need is the Instagram post id
from the URL:
{% instagram BXgGcAUjM39 %}
All you need is the data-id code from the embed link:
# Given this embed link:
<script async class="speakerdeck-embed"
data-id="7e9f8c0fa0c949bd8025457181913fd0"
data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
{% speakerdeck 7e9f8c0fa0c949bd8025457181913fd0 %}
Just enter the full URL of the Soundcloud track you are trying to embed.
{% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %}
Enter the Spotify URI of the Spotify track / playlist / album / artist / podcast episode you are trying to embed.
{% spotify spotify:episode:5V4XZWqZQJvbddd31n56mf %}
All you need is the article id code from the embed code:
{% blogcast 1234 %}
Enter the full url of the Parler.io audio file you want to embed.
{% parler https://www.parler.io/audio/73240183203/d53cff009eac2ab1bc9dd8821a638823c39cbcea.7dd28611-b7fc-4cf8-9977-b6e3aaf644a1.mp3 %}
You'll need the question or answer's ID code, and the site. When using {% stackoverflow %}
as the tag, the site will default to Stack Overflow.
For example:
https://stackoverflow.com/questions/24789130/colors-in-irb-rails-console
24789130
{% stackoverflow 24789130 %}
For other Stack Exchange network sites, you'll need to provide the site's name and use {% stackexchange %}
as the tag. For example:
https://diy.stackexchange.com/questions/169988/base-for-refrigerator-wine-shelf
169988
diy
{% stackexchange 169988 diy %}
For answers, you can get the answer's ID code by from the answer's "Share" link. For example:
https://diy.stackexchange.com/a/170185
170185
diy
{% stackexchange 170185 diy %}
Enter the full URL of the Wikipedia article you want to embed, with or without the anchor.
{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}
{% wikipedia https://en.wikipedia.org/wiki/Wikipedia#Diversity %}
All you need is an Asciinema id or URL:
{% asciinema 239367 %}
{% asciinema https://asciinema.org/a/239367 %}
Enter the full URL of the post you want to embed
{% reddit https://www.reddit.com/r/aww/comments/ag3s4b/ive_waited_28_years_to_finally_havr_my_first_pet %}
To parse Liquid tags as code, simply wrap it with a single backtick or triple backticks.
`{% mytag %}{{ site.SOMETHING }}{% endmytag %}`
One specific edge case is with using the raw
tag. To properly escape it, use this format:
`{% raw %}{{site.SOMETHING }} {% ``endraw`` %}`
Lists are written just like any other Markdown editor.
If you're adding an image in between numbered list, though, be sure to tab the image,
otherwise it'll restart the number of the list.
Here's an example of what to do: