CSS showing how to add badges to org-reveal exported files indicating the language of SRC blocks

badges.css

/**
 * Language badges for ox-html.
 *
 * The generated HTML for a
 *
 *   #+BEGIN_SRC <lang>
 *   ...
 *   #+END_SRC
 *
 * block looks like:
 *
 *   <pre class="src src-<lang>">...</pre>
 */

/**
 * Position and style the badge. It's placed at the top-right
 * of the <pre> block.
 */
.src:after {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 70%;
  background: green;
  color: white;
  text-align: center;
  line-height: 18px;
  border-radius: .25em;
  padding: 0 0.5em;
  box-shadow: 0 0 1px #333;
}

/**
 * Set the content of the badge. You need one of these for
 * each language that you use.
 */
.src-html:after {
  content: "HTML";
}

.src-javascript:after {
  content: "Javascript";
}

.src-shell:after {
  content: "Shell";
}

.src-sh:after {
  content: "Shell";
}