Git Product home page Git Product logo

hugo-shortcodes's Introduction

hugo-shortcodes

Custom shortcodes for Hugo

  1. Kotlin shortcodes
  2. Rust shortcodes

1. Kotlin - for kotlin playground

Set up

  1. copy layouts/shortcodes/kotlin.html to [your hugo site home]/layouts/shortcodes/kotlin.html
  2. copy [your hugo site home]/themes/[the theme you choose]/layouts/partials/head.html to [your hugo site home]/layouts/partials/header.html
  3. add the followings into the <head> section
<script src="https://unpkg.com/kotlin-playground@1" data-selector=".kotlin-code"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/kotlin.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
  1. Basic example
{{< kotlin >}}
class Contact(val id: Int, var email: String) 

fun main(args: Array<String>) {
    val contact = Contact(1, "[email protected]")
    println(contact.id)                   
}
{{< /kotlin >}}

Kotlin test 1

  1. example using theme and highlight-only
{{< kotlin theme="idea" highlight-only="true" >}}
fun main(args: Array<String>) {
    println("Hello World!")
}
{{< /kotlin >}}

Kotlin test 2

  1. example using darcula theme
{{< kotlin theme="darcula" highlight-only="true" >}}
fun main(args: Array<String>) {
    println("Hello World!")
}
{{< /kotlin >}}

Kotlin test 3

  1. example using platform
{{< kotlin platform="js" >}}
fun sum(a: Int, b: Int): Int {
    return a + b
}

fun main(args: Array<String>) {
    print(sum(-1, 8))
}
{{< /kotlin >}}

Kotlin test 4

  1. example using junit platform
{{< kotlin platform="junit" >}}
import org.junit.Test
import org.junit.Assert

class TestExtensionFunctions() {
    @Test fun testIntExtension() {
        Assert.assertEquals("Rational number creation error: ", RationalNumber(4, 1), 4.r())
    }

    @Test fun testPairExtension() {
        Assert.assertEquals("Rational number creation error: ", RationalNumber(2, 3), Pair(2, 3).r())
    }
}
//sampleStart
/*
Then implement extension functions Int.r() and Pair.r() and make them convert Int and Pair to RationalNumber.
*/
fun Int.r(): RationalNumber = RationalNumber(this, 2)
fun Pair<Int, Int>.r(): RationalNumber = RationalNumber(first, second)

data class RationalNumber(val numerator: Int, val denominator: Int)
//sampleEnd
{{< /kotlin >}}

Kotlin test 5

  1. example using folded-button
{{< kotlin platform="junit" folded-button="false" >}}
import org.junit.Test
import org.junit.Assert

class TestContainsFunctions() {
    @Test fun contains() {
        Assert.assertTrue(containsEven(listOf(1, 2, 3, 4)));
    }
    @Test fun notContains() {
        Assert.assertFalse(containsEven(listOf(1, 3, 5)));
    }
}
//sampleStart
/*
Pass a lambda to any function to check if the collection contains an even number.
The function any gets a predicate as an argument and returns true if there is at least one element satisfying the predicate.
*/
fun containsEven(collection: Collection<Int>): Boolean = collection.any {[mark]TODO()[/mark]}
//sampleEnd
{{< /kotlin >}}

Kotlin test 6

  1. example using canvas platform
{{< kotlin platform="canvas" >}}
package fancylines


import jquery.*
import org.w3c.dom.CanvasRenderingContext2D
import org.w3c.dom.HTMLCanvasElement
import kotlin.browser.document
import kotlin.browser.window
import kotlin.js.Math



val canvas = initalizeCanvas()
fun initalizeCanvas(): HTMLCanvasElement {
    val canvas = document.createElement("canvas") as HTMLCanvasElement
    val context = canvas.getContext("2d") as CanvasRenderingContext2D
    context.canvas.width  = window.innerWidth.toInt();
    context.canvas.height = window.innerHeight.toInt();
    document.body!!.appendChild(canvas)
    return canvas
}

class FancyLines() {
    val context = canvas.getContext("2d") as CanvasRenderingContext2D
    val height = canvas.height
    val width = canvas.width
    var x = width * Math.random()
    var y = height * Math.random()
    var hue = 0;

    fun line() {
        context.save();

        context.beginPath();

        context.lineWidth = 20.0 * Math.random();
        context.moveTo(x, y);

        x = width * Math.random();
        y = height * Math.random();

        context.bezierCurveTo(width * Math.random(), height * Math.random(),
                width * Math.random(), height * Math.random(), x, y);

        hue += (Math.random() * 10).toInt();

        context.strokeStyle = "hsl($hue, 50%, 50%)";

        context.shadowColor = "white";
        context.shadowBlur = 10.0;

        context.stroke();

        context.restore();
    }

    fun blank() {
        context.fillStyle = "rgba(255,255,1,0.1)";
        context.fillRect(0.0, 0.0, width.toDouble(), height.toDouble());
    }

    fun run() {
        window.setInterval({ line() }, 40);
        window.setInterval({ blank() }, 100);
    }
}
//sampleStart
fun main(args: Array<String>) {
    FancyLines().run()
}
//sampleEnd
{{< /kotlin >}}

Kotlin test 7

2. Rust - for something similar to rust book

Set up

  1. Copy layouts/shortcodes/rust.html to [your hugo site home]/layouts/shortcodes/rust.html
  2. Copy static/css/rust.css to [your hugo site home]/static/css/rust.css
  3. Copy static/js/rust.js to [your hugo site home]/static/js/rust.js
  4. Copy [your hugo site home]/themes/[the theme you choose]/layouts/partials/head.html to [your hugo site home]/layouts/partials/header.html
  5. Open the copied header.html and add the followings into the <head> section
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/rust.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/rust.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
  1. Copy [your hugo site home]/themes/[the theme you choose]/layouts/partials/footer.html to [your hugo site home]/layouts/partials/footer.html
  2. Open the copied footer.html and add the followings before the </body> tag
<script src="{{ .Site.BaseURL }}js/rust.js"></script>
  1. Basic example
{{< rust >}}
fn main() {
    println!("Hello, world!");
}
{{< /rust >}}

Rust test 1

  1. Hide lines with #
{{< rust >}}
#fn main() {
    println!("Hello, world!");
#}
{{< /rust >}}

Rust test 2

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.