Back to Questions
2.2k
views5
comments
How do you display a code block
websharper

I want to put the code for my app into my page. How do you create the code blocks like the websharper examples?

.

This has quite a few aspects, the main one being how to make the source code of a site available to itself. There are various ways of dealing with that: you can add post-build hooks to copy the source files into the hosting WebSharper site, or you can mark them as embedded resources and extract them from the containing assembly on the fly. Either way, you will then need a server side function to compute this text, pass it back to the client, and wrap it in a pre tag of some sort to make it look like code.

By on 9/23/2014 2:13 PM ()

I found this site that formats the HTML for you...

[link:fslight.apphb.com]

By on 9/25/2014 8:54 AM ()

I used that tool to share F# code on blogger but had some CSS related problems when using it on websites built with Bootstrap. On this WebSharper snippets website I'm formatting the code on the server side using this code. On a website that features some F# code samples I'm using highlight.js for syntax highlighting on the client side. You can also use FSharp.Formatting and get hover tool-tips with the code.

By on 9/26/2014 12:06 PM ()

I was able to get FSharp.Formatting to output an HTML page. How do I use the html with a jqueryUI control. I tried 

1

A[Attr.HRef "~/wb.html"]

but it did not work.

By on 9/30/2014 6:47 PM ()

You need an iframe in order to load another HTML page:

1

IFrame [Src "wb.html"; Style "border: none; width: 100%;"]

Don't also forget to reference style.css and tips.js (available in the package styles folder) in wb.html.

By on 10/1/2014 8:50 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper