Skip to content

Instantly share code, notes, and snippets.

@DrBud

DrBud/.block

Last active September 3, 2018 18:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DrBud/d4b84a34a93ef979123197da0642190f to your computer and use it in GitHub Desktop.
Save DrBud/d4b84a34a93ef979123197da0642190f to your computer and use it in GitHub Desktop.
Download ZIP
My First Smartdown-via-Blocks Project
Raw
.block
height: 700
scrolling: yes
Raw
README.md

My Block's README.md

This is my first attempt at building a Gist that will become a Block.

I will likely replace this text with something more meaningful in the future.

Raw
Home.md

Smartdown is Markdown, and More

Smartdown is Markdown, and More

  • Visit the Playground
  • More info at Smartdown Viewer Site
  • Styles: bold or italic or strikethru
  • Notation: $E=mc^2$ and $\Gamma \vdash \Delta$
  • Code highlighting:
const totalSize = leftSize + rightSize + 1; // A comment
  • Tweets:

Subheading ##

Subheading ###

Subheading ####

Subheading #####
Subheading ######
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>My First Smartdown Block</title>
<link rel=stylesheet href="https://smartdown.site/lib/fonts.css">
<link rel=stylesheet href="https://smartdown.site/lib/smartdown.css">
<script src="https://smartdown.site/lib/smartdown.js"></script>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<div
class="smartdown-container"
id="smartdown-output">
</div>
<script
src="https://smartdown.site/lib/blocks_helper.js">
</script>
<script>
console.log('using starter');
window.smartdownStarter();
</script>
</body>
</html>
Raw
Playground.md

Welcome to the Playground

This card demonstrates the synergy between Smartdown cells and playables. In this case, we are using a P5JS playable to draw a sketch and react to changes in the Name variable via the What is your name? input field.

What is your name?

Click the triangular Play button to play this Sketch, .

p5.setup = function () {
  p5.resizeCanvas(p5.windowWidth / 2, 150);
};

p5.draw = function() {
  p5.background('darkgray');
  var name = env.Name || 'Someone';
  p5.fill('lavender');
  p5.ellipse(50, 70, 80, 120);
  p5.textSize(32);
  p5.fill('lightgreen');
  p5.text(name, 100, 40);
  p5.fill('lightblue');
  p5.text(name, 100, 70);
  p5.fill('pink');
  p5.text(name, 100, 100);
};

Back to Home

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment