Skip to content

Instantly share code, notes, and snippets.

@richplastow

richplastow/Hello.coffee.md

Last active October 9, 2017 09:08
Show Gist options
  • Save richplastow/6ec50df2af6d0018d056be28867f6745 to your computer and use it in GitHub Desktop.
Save richplastow/6ec50df2af6d0018d056be28867f6745 to your computer and use it in GitHub Desktop.
Download ZIP
Trying out GitHub.js
Raw
Hello.coffee.md

Reformatted Hello.vue so that GitHub will highlight Jade and Stylus

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

Note that CoffeeScript can be indented...

import OtherComponent from './OtherComponent.vue'

export default
    data
        greeting: 'Hello'
    components
        OtherComponent: OtherComponent

...or be put in a triple-backtick codeblock.

/**
 * This file is compiled based on offical documentation at
 * http://stylus-lang.com/docs/ to test highlighting
 */

// @at-rules
@import "test.css";
@charset "utf-8";
@font-face {
    font-family: Ubuntu, sans-serif;
    src: url('fonts/pompadur.ttf');
}

// animation
@keyframes myfirst {
  from {
    background: red;
  }
  50% {
    background red
  }
  to {
    background: yellow;
  }
}

// media query
@media screen and (max-width: 500px) {
  a {
    color: #fff;
  }
}

// one-line code
a { color: red; top: 0; } b { color: #fff; } i { color: #fff; }

// Colors
body {
  color: #fff;
  color: #ffffff;
  color: #fff4;
  color: #ffffff44;
  color: rgb(100%, 100%, 50%);
  color: rgb(23, 23, 23);
  color: rgba(23, 23, 23, 0.4);
  color: rgba(#c33, 0.4);
  color: hsl(23, 23, 23);
  color: hsla(23, 23, 23, 0.4);
  color: hsla(#fff, 0.4);
}

// Properties
a {
  top: 0
  top:0
  top :0
  top 0

  // tabs instead of spaces as delimiters
  -webkit-transition	:	arguments
  -moz-transition	arguments

  // multiline property, comma separated
  box-shadow: 0 1px 1px #fff,
              0 0 4px rgba(0,0,0,0.4)

  // multiline function call
  background-image: linear-gradient(
    top,
    #fff,
    #ccc
  )
}

// pseudo-elements and selectors
a:nth-child(2n+1):not(:dir(rtl))::after:lang(fsd):active {
  color: red;
}

// Literal css
@css {
  a {
    color: #fff;
  }
}

// Universal selector
*, *.test, *#test
  color: white

// tag attributes selectors
[a=bb], [a~=bb], [a|=bb], [a="bb"], [a='bb'],
[{x}a{x}sd{x}=sdf], [a={x}s{x}df{x}]
  color: red

// Escaping
body
  top 10 \+ 5

// Multiple selectors separated by line break
html,
body
  font
    color red
  // vendor prefix
  -webkit-background-clip: border-box

  // ending in interpolation
  h1{s} {
    text-decoration: none;
  }
  // no space before braces
  h2{
    color black
  }

// Selectors start with a symbol
div
  :before
  ::before
  ~ div
  + div
  > div
  [href^="#"]
  / div
  *
    background-color: red

// Compound selectors
body.someclass#someid
  font normal 18px/30px OpenSans, Verdana, sans-serif

// Multiple selectors separated by comma
textarea, input
  border 1px solid #fff

// Multiple properties separated by line
font .a32
  font-family font1
  font-size base-font-size
  font normal
  font bold
  font lighter
  font monospace
  font 400
  font 1.2em
  font "Verdana"
  font normal 18px/30px OpenSans, Verdana, sans-serif
  left 15px

// Multiple properties separated by semicolon
header
  font-size 10px; left 15px;

// Ambigious property / selector
// when with comma should be recognized as a selector
header body,
header
  top 0

// Parent reference, including BEM-style expansion
.block
  &
    top 0
  &:hover
    top 0
  &.test
    top 0
    &_modifier
      top 0
  &#test
    top 0
  header&
    top 0
  footer &
    top 0

// Variable assignments
i = '' // test comment
n ?= 5
test := 5

// Hashes
hash = {
  somekey: true
  // commented: true
  'escaped key 1' : 'value'
  "escaped key 2" : 'value'
}
hashOneLine = { somekey: true }
hashEmpty = {}
hash['key'] = 'value'
hash['other'] = hash['key']
hash.somekey = false
hash.nested = { somekey: false }
hash.nested.somekey = true
hash['nested'].somekey = true
hash.nested['somekey'] = true

// making sure this isn't considered an assignment
input[type=text] {
  &:focus {
    text-align: center;
  }
}

// Complex case of a property
a
  /* */fo{i}nt-family{n+1}fsd #ccc  sdfs // 213px

// Function definition and control structures
somefunction(a, b = 16px, c = b, d...)
  if c
    top b
  else
    return a
  for x, y in somedictionary
    &_{x}_{y}
      color x if y

// simple function (mixin) definition
somemixin()
  color red

// usage of a function (mixin) and value in braces
a
  somemixin()
  margin-bottom (2px / 1)

// built-in functions
.foo
  test = 5
  jpg = "png"
  background-image url(../test.jpg) // will yeild url("../5.png")
  background-image url("../test.jpg")

// block mixin
bar()
  {block}

body
  +bar()
    width: 100%;

// Placeholder selectors
$foo
  color red

// Extending
.bar
  @extend $foo
  background: #000

// Special treatment for cursor
.bar
  cursor: pointer
.bar
  cursor: pointer
.bar
  cursor   :   pointer
.bar
cursor url('zoom.cur')
Raw
Hello.vue
<template lang="pug">
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) bar(1 + 5)
body
h1 Pug - node template engine
#container.col
if youAreUsingPug
p You are amazing
else
p Get on it!
p.
Pug is a terse and simple templating language with a
strong focus on performance and powerful features.
</template>
What goes in here? Can this me _comments_?
<script lang="coffee">
import OtherComponent from './OtherComponent.vue'
export default
data
greeting: 'Hello'
components
OtherComponent: OtherComponent
</script>
<style lang="stylus" scoped>
/**
* This file is compiled based on offical documentation at
* http://stylus-lang.com/docs/ to test highlighting
*/
// @at-rules
@import "test.css";
@charset "utf-8";
@font-face {
font-family: Ubuntu, sans-serif;
src: url('fonts/pompadur.ttf');
}
// animation
@keyframes myfirst {
from {
background: red;
}
50% {
background red
}
to {
background: yellow;
}
}
// media query
@media screen and (max-width: 500px) {
a {
color: #fff;
}
}
// one-line code
a { color: red; top: 0; } b { color: #fff; } i { color: #fff; }
// Colors
body {
color: #fff;
color: #ffffff;
color: #fff4;
color: #ffffff44;
color: rgb(100%, 100%, 50%);
color: rgb(23, 23, 23);
color: rgba(23, 23, 23, 0.4);
color: rgba(#c33, 0.4);
color: hsl(23, 23, 23);
color: hsla(23, 23, 23, 0.4);
color: hsla(#fff, 0.4);
}
// Properties
a {
top: 0
top:0
top :0
top 0
// tabs instead of spaces as delimiters
-webkit-transition : arguments
-moz-transition arguments
// multiline property, comma separated
box-shadow: 0 1px 1px #fff,
0 0 4px rgba(0,0,0,0.4)
// multiline function call
background-image: linear-gradient(
top,
#fff,
#ccc
)
}
// pseudo-elements and selectors
a:nth-child(2n+1):not(:dir(rtl))::after:lang(fsd):active {
color: red;
}
// Literal css
@css {
a {
color: #fff;
}
}
// Universal selector
*, *.test, *#test
color: white
// tag attributes selectors
[a=bb], [a~=bb], [a|=bb], [a="bb"], [a='bb'],
[{x}a{x}sd{x}=sdf], [a={x}s{x}df{x}]
color: red
// Escaping
body
top 10 \+ 5
// Multiple selectors separated by line break
html,
body
font
color red
// vendor prefix
-webkit-background-clip: border-box
// ending in interpolation
h1{s} {
text-decoration: none;
}
// no space before braces
h2{
color black
}
// Selectors start with a symbol
div
:before
::before
~ div
+ div
> div
[href^="#"]
/ div
*
background-color: red
// Compound selectors
body.someclass#someid
font normal 18px/30px OpenSans, Verdana, sans-serif
// Multiple selectors separated by comma
textarea, input
border 1px solid #fff
// Multiple properties separated by line
font .a32
font-family font1
font-size base-font-size
font normal
font bold
font lighter
font monospace
font 400
font 1.2em
font "Verdana"
font normal 18px/30px OpenSans, Verdana, sans-serif
left 15px
// Multiple properties separated by semicolon
header
font-size 10px; left 15px;
// Ambigious property / selector
// when with comma should be recognized as a selector
header body,
header
top 0
// Parent reference, including BEM-style expansion
.block
&
top 0
&:hover
top 0
&.test
top 0
&_modifier
top 0
&#test
top 0
header&
top 0
footer &
top 0
// Variable assignments
i = '' // test comment
n ?= 5
test := 5
// Hashes
hash = {
somekey: true
// commented: true
'escaped key 1' : 'value'
"escaped key 2" : 'value'
}
hashOneLine = { somekey: true }
hashEmpty = {}
hash['key'] = 'value'
hash['other'] = hash['key']
hash.somekey = false
hash.nested = { somekey: false }
hash.nested.somekey = true
hash['nested'].somekey = true
hash.nested['somekey'] = true
// making sure this isn't considered an assignment
input[type=text] {
&:focus {
text-align: center;
}
}
// Complex case of a property
a
/* */fo{i}nt-family{n+1}fsd #ccc sdfs // 213px
// Function definition and control structures
somefunction(a, b = 16px, c = b, d...)
if c
top b
else
return a
for x, y in somedictionary
&_{x}_{y}
color x if y
// simple function (mixin) definition
somemixin()
color red
// usage of a function (mixin) and value in braces
a
somemixin()
margin-bottom (2px / 1)
// built-in functions
.foo
test = 5
jpg = "png"
background-image url(../test.jpg) // will yeild url("../5.png")
background-image url("../test.jpg")
// block mixin
bar()
{block}
body
+bar()
width: 100%;
// Placeholder selectors
$foo
color red
// Extending
.bar
@extend $foo
background: #000
// Special treatment for cursor
.bar
cursor: pointer
.bar
cursor: pointer
.bar
cursor : pointer
.bar
cursor url('zoom.cur')
</style>
Raw
oom-test-1.coffee.md

GitHub and Ace highlight Jade, CoffeeScript and Stylus

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

Note that CoffeeScript can be indented...

# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

...or be put in a triple-backtick codeblock.

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# Existence:
alert "I knew it!" if elvis?

# Array comprehensions:
cubes = (math.cube num for num in list)

/**
 * This file is compiled based on offical documentation at
 * http://stylus-lang.com/docs/ to test highlighting
 */

// @at-rules
@import "test.css";
@charset "utf-8";
@font-face {
    font-family: Ubuntu, sans-serif;
    src: url('fonts/pompadur.ttf');
}

// animation
@keyframes myfirst {
  from {
    background: red;
  }
  50% {
    background red
  }
  to {
    background: yellow;
  }
}

// media query
@media screen and (max-width: 500px) {
  a {
    color: #fff;
  }
}

// one-line code
a { color: red; top: 0; } b { color: #fff; } i { color: #fff; }

// Colors
body {
  color: #fff;
  color: #ffffff;
  color: #fff4;
  color: #ffffff44;
  color: rgb(100%, 100%, 50%);
  color: rgb(23, 23, 23);
  color: rgba(23, 23, 23, 0.4);
  color: rgba(#c33, 0.4);
  color: hsl(23, 23, 23);
  color: hsla(23, 23, 23, 0.4);
  color: hsla(#fff, 0.4);
}

// Properties
a {
  top: 0
  top:0
  top :0
  top 0

  // tabs instead of spaces as delimiters
  -webkit-transition	:	arguments
  -moz-transition	arguments

  // multiline property, comma separated
  box-shadow: 0 1px 1px #fff,
              0 0 4px rgba(0,0,0,0.4)

  // multiline function call
  background-image: linear-gradient(
    top,
    #fff,
    #ccc
  )
}

// pseudo-elements and selectors
a:nth-child(2n+1):not(:dir(rtl))::after:lang(fsd):active {
  color: red;
}

// Literal css
@css {
  a {
    color: #fff;
  }
}

// Universal selector
*, *.test, *#test
  color: white

// tag attributes selectors
[a=bb], [a~=bb], [a|=bb], [a="bb"], [a='bb'],
[{x}a{x}sd{x}=sdf], [a={x}s{x}df{x}]
  color: red

// Escaping
body
  top 10 \+ 5

// Multiple selectors separated by line break
html,
body
  font
    color red
  // vendor prefix
  -webkit-background-clip: border-box

  // ending in interpolation
  h1{s} {
    text-decoration: none;
  }
  // no space before braces
  h2{
    color black
  }

// Selectors start with a symbol
div
  :before
  ::before
  ~ div
  + div
  > div
  [href^="#"]
  / div
  *
    background-color: red

// Compound selectors
body.someclass#someid
  font normal 18px/30px OpenSans, Verdana, sans-serif

// Multiple selectors separated by comma
textarea, input
  border 1px solid #fff

// Multiple properties separated by line
font .a32
  font-family font1
  font-size base-font-size
  font normal
  font bold
  font lighter
  font monospace
  font 400
  font 1.2em
  font "Verdana"
  font normal 18px/30px OpenSans, Verdana, sans-serif
  left 15px

// Multiple properties separated by semicolon
header
  font-size 10px; left 15px;

// Ambigious property / selector
// when with comma should be recognized as a selector
header body,
header
  top 0

// Parent reference, including BEM-style expansion
.block
  &
    top 0
  &:hover
    top 0
  &.test
    top 0
    &_modifier
      top 0
  &#test
    top 0
  header&
    top 0
  footer &
    top 0

// Variable assignments
i = '' // test comment
n ?= 5
test := 5

// Hashes
hash = {
  somekey: true
  // commented: true
  'escaped key 1' : 'value'
  "escaped key 2" : 'value'
}
hashOneLine = { somekey: true }
hashEmpty = {}
hash['key'] = 'value'
hash['other'] = hash['key']
hash.somekey = false
hash.nested = { somekey: false }
hash.nested.somekey = true
hash['nested'].somekey = true
hash.nested['somekey'] = true

// making sure this isn't considered an assignment
input[type=text] {
  &:focus {
    text-align: center;
  }
}

// Complex case of a property
a
  /* */fo{i}nt-family{n+1}fsd #ccc  sdfs // 213px

// Function definition and control structures
somefunction(a, b = 16px, c = b, d...)
  if c
    top b
  else
    return a
  for x, y in somedictionary
    &_{x}_{y}
      color x if y

// simple function (mixin) definition
somemixin()
  color red

// usage of a function (mixin) and value in braces
a
  somemixin()
  margin-bottom (2px / 1)

// built-in functions
.foo
  test = 5
  jpg = "png"
  background-image url(../test.jpg) // will yeild url("../5.png")
  background-image url("../test.jpg")

// block mixin
bar()
  {block}

body
  +bar()
    width: 100%;

// Placeholder selectors
$foo
  color red

// Extending
.bar
  @extend $foo
  background: #000

// Special treatment for cursor
.bar
  cursor: pointer
.bar
  cursor: pointer
.bar
  cursor   :   pointer
.bar
cursor url('zoom.cur')
Raw
oom-test-1.html
<html>
<head><title>Oom Test 1</title></head>
<body>
<h1>Oom Test 1</h1>
<script src="./oom-test-1.js"></script>
<img src="./test-jpeg-1.jpg">
</body>
</html>
Raw
oom-test-1.js
(function() {
// This is a major revision!
document.querySelector('body').style.color = 'blue';
}).call(this);
Raw
TodoList.vue
<template>
<div>
<BaseInputText
v-model="newTodoText"
placeholder="New todo"
@keydown.enter="addTodo"
/>
<ul v-if="todos.length">
<TodoListItem
v-for="todo in todos"
:key="todo.id"
:todo="todo"
@remove="removeTodo"
/>
</ul>
<p v-else>
Nothing left in the list. Add a new todo in the input above.
</p>
</div>
</template>
What goes in here? Can this be _comments_?
<script>
import BaseInputText from './BaseInputText.vue'
import TodoListItem from './TodoListItem.vue'
let nextTodoId = 1
export default {
components: {
BaseInputText, TodoListItem
},
data () {
return {
newTodoText: '',
todos: [
{
id: nextTodoId++,
text: 'Learn Vue'
},
{
id: nextTodoId++,
text: 'Learn about single-file components'
},
{
id: nextTodoId++,
text: 'Fall in love'
}
]
}
},
methods: {
addTodo () {
const trimmedText = this.newTodoText.trim()
if (trimmedText) {
this.todos.push({
id: nextTodoId++,
text: trimmedText
})
this.newTodoText = ''
}
},
removeTodo (idToRemove) {
this.todos = this.todos.filter(todo => {
return todo.id !== idToRemove
})
}
}
}
</script>
<style scoped>
.input {
width: 100%;
padding: 8px 10px;
border: 1px solid blue;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment