I am using GitHub pages to publish files from a project. These files are Java source code files, which I have been able to add as static files into Jekyll as a collection. I would need to apply a layout to these files for, e.g., code formatting. I am unable to do this.
My static source code files are in a collection defined in _config.yml:
collections_dir: material
collections:
cse-solutions:
output: true
This part of my site works fine: .java-files under material/_cse-solutions appear on the static site into /cse-solutions.
However, I would need to include a title and code formatting. For this I am trying to apply a layout to these static files. My current effort is the following. First, in _config.yml I set
defaults:
- scope:
path: ""
type: "cse-solutions"
values:
layout: java-code
Then I have a file _layouts/java-code.html with contents, for simplicity at this point
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test title </title>
</head>
<body>
<h1> Test code page heading </h1>
{{ content }}
</body>
</html>
However, this layout has no effect on the .java files on the site. To be honest, if the layout were effective, I do not know whether the output would even have .java-suffix. Still, I can not find any corresponding .html-pages on the site either.
Can this be done? If it can, what am I doing wrong?
EDIT: I suspect Jekyll just ignores layout for static files. Using jsonify from Liquid I can actually print the value of this collection, and there I can see that the system has correctly set, for these static files:
”layout”:”java_code”
But there is absolutely no effect in the formatting of these files.
(The underscore, that is, java_code instead of java-code is not an error here, because I noticed that some parts of Jekyll do not like dashes in identifiers, so I changed dashes to underscores everywhere. I think Ruby does not allow dashes in identifiers.)
I think you may be over complicating things a bit. If I understand correctly, you are trying to simply display the actual source code on your page correct? For example you would like your code to look like:
class HelloWorld
{
public static void main(String args[])
{
System.out.println("Hello, World");
}
}
If this is the case, you can simply save the written source code as a markdown file (.md) and let the kramdown mardkown converter handle displaying it correctly. To do this you need to make sure that you have the following in your _config.yml file:
kramdown:
# Use GitHub flavored markdown, including triple backtick fenced code blocks
input: GFM
# Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
syntax_highlighter: rouge
This will make sure kramdown is enabled and will use rouge for syntax highlighting if you would like.
Then for each page you want, simply create a pagename.md file and add at least the following front matter at the very top of the page:
---
layout: java-code
title: "Here is my source code page"
---
This tells jekyll to use the "java-code" layout you already made and to define the title for the page as whatever you put in the quotes. After the front matter, simply copy your source code into a code block for markdown. It is very simple, all you need to do is have a line with ``` before and after you code. You can optionally have the first line be ```java to tell rouge to highlight for java syntax to make it easier to read.
You can put any markdown text outside of the code block that you would like as well. That means you can have a description of the code, or even break the code into segments with text descriptions before each part.
To put it all together you file should look something like:
---
layout: java-code
title: "Here is my source code page"
---
Here is my simple "Hello, world" program:
```java
class HelloWorld
{
public static void main(String args[])
{
System.out.println("Hello, World");
}
}
```
Check out the docs page for posts on jekyll's website for more info, and if you are unfamiliar with markdown there are tons of guides on writing with it if you do a quick google search (its how stackoverflow answers are formatted!).
Related
I have a home.md file whose content I am rendering in home.html using {{page.content}}. I also want to use content of another markdown file, news.md. How can I access the content of news.md in home.html?
I tried using {% import "news.html" as news %} in home.html but got a TemplateNotFound error.
<div>
{{news}}
</div>
To include a Markdown file at an arbitrary position inside another Markdown file, first install the mdx_include Python-Markdown extension. Then update the Pelican configuration (e.g., pelicanconf.py) to load it:
MARKDOWN = {
# ...
'extensions': ['mdx_include']
}
Now you can use the following syntax to place the target file in the desired location:
This is some content in your Markdown file.
{! file_path_or_url_to_another_Markdown_file !}
This is text that will appear after the included file.
This functionality is orthogonal to Pelican but is discussed nonetheless in the Including Other Files section of the documentation.
By default, Jekyll uses *.html, however, the program I use (Sublime Text 3) has an a package that adds Liquid syntax support but it will only auto detect and do the code suggestions if the file has the extension *.liquid. The other problem is, Jekyll is looking for default.html as well as the other layouts. How do I make Jekyll look for *.liquid files instead like default.liquid?
In the bottom right hand corner of sublime it will have the name of the filetype being used, for example 'HTML'. If you click this you can change it to liquid.
What worked for me is to rename files to *.liquid.html and then
update the front-matter to use the new name, e.g.,
Including abc.liquid.html in default.liquid.html
=== default.liquid.html ===
---
---
{% include file.liquid.html %}
Using layout default.liquid.html in a Blog Post
---
layout: default.liquid
title: "My post title"
date: 2021-01-24 19:00
---
Quick Summary
How do I place HTML files in place within an R Markdown file?
Details
I have created some nice animated choropleth maps via choroplethr.
As the link demonstrates, the animated choropleths function via creating a set of PNG images, which are then rolled into an HTML file that cycles through the images, to show the animation. Works great, looks great.
But now I want to embed / incorporate these pages within the .Rmd file, so that I have a holistic report including these animated choropleths, along with other work.
It seems to me there should be an easy way to do an equivalent to
Links:
[please click here](http://this.is.where.you.will.go.html)
or
Images:
The images path is precisely what I want: a reference that is "blown up" to put the information in place, instead of just as a link. How can I do this with a full HTML file instead of just an image? Is there any way?
Explanation via Example
Let's say my choropleth HTML file lives in my local path at './animations/demographics.html', and I have an R Markdown file like:
---
title: 'Looking at the demographics issue'
author: "Mike"
date: "April 9th, 2016"
output:
html_document:
number_sections: no
toc: yes
toc_depth: 2
fontsize: 12pt
---
# Introduction
Here is some interesting stuff that I want to talk about. But first, let's review those earlier demographic maps we'd seen.
!
where I have assumed / pretended that !! is the antecedent that will do precisely what I want: allow me to embed that HTML file in-line with the rest of the report.
Updates
Two updates. Most recently, I still could not get things to work, so I pushed it all up to a GitHub repository, in case anyone is willing to help me sort out the problem. Further details can be found at that repo's Readme file.
It seems that being able to embed HTML into an R Markdown file would be incredibly useful, so I keep trying to sort it out.
(Older comments)
As per some of the helpful suggestions, I tried and failed the following in the R Markdown file:
Shiny method:
```{r showChoro1}
shiny::includeHTML("./animations/demographics.html")
```
(I also added runtime:Shiny up in the YAML portion.)
htmltools method:
```{r showChoro1}
htmltools::includeHTML("./animations/demographics.html")
```
(In this case, I made no changes to the YAML.)
In the former case (Shiny), it did not work at all. In fact, including the HTML seemed to muck up the functionality of the document altogether, such that the runtime seemed perpetually not-fully-functional. (In short, while it appeared to load everything, the "loading" spindel never went away.)
In the latter case, nothing else got messed up, but it was a broken image. Strangely, there was a "choropleth player" ribbon at the top of the document which would work, it's just that none of the images would pop up.
For my own sanity, I also provided simple links, which worked fine.
[This link](./animations/demographics.html) worked without a problem, except that it is not embedded, as I would prefer.
So it is clearly a challenge with the embedding.
Here is a hack (probably inelegant)...idea is to directly insert HTML programmatically in Rmd and then render Rmd.
temp.Rmd file:
---
title: "Introduction"
author: "chinsoon12"
date: "April 10, 2016"
output: html_document
---
<<insertHTML:[test.html]
etc, etc, etc
```{r, echo=FALSE}
htmltools::includeHTML("test.html")
```
etc, etc, etc
test.html file:
<html>
<head>
<title>Title</title>
</head>
<body>
<p>This is an R HTML document. When you click the <b>Knit HTML</b> button a web page will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:</p>
<p>test test</p>
</body>
</html>
verbose code to replace Rmd code with HTML code and then render (can probably be shortened by a lot)
library(stringi)
subHtmlRender <- function(mdfile, htmlfile) {
#replace <<insertHTML:htmlfile with actual html code
#but without beginning white space
lines <- readLines(mdfile)
toSubcode <- paste0("<<insertHTML:[",htmlfile,"]")
location <- which(stri_detect_fixed(lines, toSubcode) )
htmllines <- stri_trim(readLines(htmlfile))
#render html doc
newRmdfile <- tempfile("temp", getwd(), ".Rmd")
newlines <- c(lines[1:(location-1)],
htmllines,
lines[min(location+1, length(lines)):length(lines)]) #be careful when insertHTML being last line in .Rmd file
write(newlines, newRmdfile)
rmarkdown::render(newRmdfile, "html_document")
shell(gsub(".Rmd",".html",basename(newRmdfile),fixed=T))
} #end subHtmlRender
subHtmlRender("temp.Rmd", "test.html")
EDIT: htmltools::includeHTML also works with the sample files that I provided. Is it because your particular html does not like UTF8-encoding?
EDIT: taking #MikeWilliamson comments into feedback
I tried the following
copied and pasted animated_choropleth.html into a blank .Rmd
remove references to cloudfare.com as I had access issues while
rendering (see below)
knit HTML
put back those cloudfare weblinks
put the graphs in the same folder as the rendered html
open the HTML
I appear to get back the html but am not sure if the result is what you expect
Are you also facing the same issue in pt 2? You might want to post the error message and ask for fixes :). This was my error message
pandoc.exe: Failed to retrieve http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css
FailedConnectionException2 "cdnjs.cloudflare.com" 80 False getAddrInfo: does not exist (error 11001)
Error: pandoc document conversion failed with error 61
Did you try the includes: option in your YAML header?
https://rmarkdown.rstudio.com/html_document_format.html#includes
But maybe you'll have the same problem I have: I'd like to include the HTML file in a specific section in my RMarkdown document, not in the header or before/after body.
can try put this line in the Rmarkdown and then knit.
(YAML header "output: html_document"; if "runtime: shiny" somehow it does not work)
I've switched from using the Resources plugin to the new Asset Pipeline plugin. However, I've come across an issue that I'm not sure how to fix.
I use several templates (ie: _template.gsp) that are included via the g:render tag from other GSP files.
_template.gsp:
<%# page contentType="text/html;charset=UTF-8" %>
<asset:stylesheet src="_template.css"/>
<asset:javascript src="_template.js"/>
<div>
...
</div>
other GSP files:
...
<g:render template="/template"/>
...
In my _template.gsp file I include several assets that are required for the code in the template to work and/or look right. When I used the resources plugin to accomplish this, things worked as expected. Any files included in templates were moved to the HEAD section of the resulting GSP file. However, with the Asset Pipeline plugin, they stay in the same location where the template was included in the calling GSP file. And to make things worse, they aren't processed correctly, so they aren't loaded correctly in the resulting HTML file.
For example, in debug the resulting HTML file looks like this
...
<link rel="stylesheet" href="/assets/_template.css?compile=false"/>
<script src="/assets/_template.js?compile=false" type="text/javascript"></script>
<div>
...
</div>
...
and everything works (although the file ideally should be loaded in the HEAD section like it used to when using the Resources plugin).
In production the resulting HTML file looks like:
...
<link rel="stylesheet" href="/assets/_template.css"/>
<script src="/assets/_template.js" type="text/javascript"></script>
<div>
...
</div>
...
however, in production all other included assets (files included in the actual GSP file) have longer filenames that look like styles-6a85c6fa983d13b6f58e12b475e9d35c.css. The _template.css and _template.js files from the template isn't being converted to one of these long filenames and if I try to access the /assets/styles.css path I simply get a blank page.
I was able to solve the first part of my problem (the assets not being in the HEAD) by creating the following tag library:
class TemplateAssetsTagLib
{
// Define the namespace and encoding
static namespace = 'tasset'
static defaultEncodeAs = 'raw'
// Tag called to move the content of this tag to where the assets tag is located (usually the HTML HEAD section)
def head = { attrs, body ->
// Get any existing asset blocks
def assetBlocks = request.getAttribute('templateAssetBlocks')
if(!assetBlocks)
assetBlocks = []
// Add the body of this tag to the asset blocks list
assetBlocks << body()
request.setAttribute('templateAssetBlocks', assetBlocks)
}
// Tag called to load any content that was saved using the head tag
def assets = { attrs ->
// Get all existing asset blocks
def assetBlocks = request.getAttribute('templateAssetBlocks')
if(!assetBlocks)
return
// Output the asset blocks
assetBlocks.each { assetBlock ->
out << assetBlock
}
}
}
It's mirrored after the Asset Pipeline deferred script functionality, but more generic.
And I've been able to solve the second problem by simply renaming the assets and removing the leading underscore. For some reason assets with a leading underscore don't get compiled during WAR creation and therefore aren't accessible in production mode.
Is there a way to include a plain html page inside a Play Framework's view template? I have a scenario wherein there is a common view template and in the body of the template, I would like to include certain static html pages. I know that I can include other templates inside a certain template, but I'm not sure if I could include a plain html page?
One option is to just make your static HTML a template, eg, create myStaticPage.scala.html:
<h1>Static page</h1>
<p>This page is static, though it is still a template.</p>
Then your view template, myView.scala.html:
#(staticPage: Html)
<html>
<head>...</head>
<body>#staticPage</body>
</html>
And then in your action that renders the template:
def renderMyStaticPage = Action {
Ok(views.html.myView(views.html.myStaticPage())
}
You just need to make sure that your HTML page escapes any # symbols with ##.
On the other hand, if which HTML page that's being included is more dynamic, then simply load the HTML from the file/database/classloader/whereever it's coming from, eg:
def renderMyStaticPage = Action {
val staticPage: String = // code to load static page here
Ok(views.html.myView(Html(staticPage))
}
You could.
Just put something like that in your routes file:
GET /file controllers.Assets.at(path="/public", file="html/file.html")
Here is a duplicated post: Route to static file in Play! 2.0