Code block

An independently installable component. Its content and surrounding layout remain consumer-owned.

open FSharp.ViewEngine
open type Html

let greeting = p { "Hello, F#" }
let html = Render.toString greeting

open FSharp.ViewEngine
open Acme.Components
open type Html

let codeBlock = CodeBlock.create "fsharp" "open FSharp.ViewEngine\nopen type Html\n\nlet greeting = p { \"Hello, F#\" }\nlet html = Render.toString greeting" |> CodeBlock.render

On this page

dotnet fve add code-block --config src/Acme.Components/fve.json

open FSharp.ViewEngine
open Acme.Components
open type Html

let codeBlock = CodeBlock.create "fsharp" "open FSharp.ViewEngine\nopen type Html\n\nlet greeting = p { \"Hello, F#\" }\nlet html = Render.toString greeting" |> CodeBlock.render

Include CodeBlock.assets once in your document head with the URLs of your Prism stylesheet and language scripts. Layout.fs in each template demonstrates the complete setup.

type CodeBlockConfig

module CodeBlock =
    val assets : stylesheet:string option -> scripts:string list -> HtmlElement
    val create : language:string -> source:string -> CodeBlockConfig
    val render : block:CodeBlockConfig -> HtmlElement

Code block

Copyable highlighted source