Xcode 6.3 beta 2 introduced one of my favorite new features: rich text documentation. This replaces all the playground building stuff you’ve seen around, both my extremely meh attempts and far better implementations like Jason Sandmeyer’s markup-powered generator, which remains available as an open source github repository.
Instead of constructing manifests and HTML docs, you just add comments using the new //: and /*: */ delimiters. There are a bunch of custom markup items detailed over at Apple but they work very badly in the current beta. Simple HTML at least for the moment provides a far better experience.
Stephen Celis (aka “the one who isn’t Sebastian”) continues to hold the prize for best/worst use of new in-playground documentation using the new system and HTML/CSS source. Of course, I’ve been trying for a while to reproduce his awesome works, but was stymied by the comic-sans. Using font-family css just wasn’t working for me.
Today, I finally cracked the case. Instead of font-family, I needed to use a direct font reference instead. What follows are my take on Celis’ three innovative technologies: Comic Sans, Blinky text, and Rainbow colors, all courtesy of intensive Google searches.
/*:
<head><style>
h1 {
color: gray;
font: italic bold 40px Comic Sans MS, sanserif;
}
p {
color: green;
}
.rainbow {
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}
@keyframes blink {
0% { color: red; }
100% { color: black; }
}
@-webkit-keyframes blink {
0% { color: red; }
100% { color: black; }
}
.blink {
-webkit-animation: blink 0.5s linear infinite;
-moz-animation: blink 0.5s linear infinite;
animation: blink 0.5s linear infinite;
}
</style></head>
<h1>Comic Sans</h1>
<p><span class="rainbow">Double rainbow across the sky</span></p>
<p>This is <span class="blink">blinking</span> text</p>
*/
3 Comments
You can actually use font-family, as well, but—as with all wonderfully terrible CSS—you must be liberal with your use of “!important” 🙂
Markup link to apple is broken. new link is: https://developer.apple.com/library/prerelease/ios/documentation/Swift/Reference/Playground_Ref/MarkupReference.html
Hi! I’ve been trying to get this to work in the new Xcode beta, but no matter what I try it just shows up as a comment. You mention the new //: delimeter in your article, do you have to preface your code with said delimeter…? Could there be something that I’m missing? I’ve been experimenting, trying to get it to work, but I keep coming up short. Any chance you could post your unrendered markup? There is nothing in the iOS Developer Library about using HTML… This shouldn’t bother me as much as it does, but I really want to get this to work! Thanks!