Does anyone know if it is possible have the output of knit2html (i.e. markdownToHTML) wrapped in an HTML container?
Currently, everything gets dumped into <body>, which does not provide a lot of flexibility for controlling the layout.
For example, what I would like to from something like:
example.md
<div id='main'>
Markdown
========
some text, etc. here...
</div>
To:
example.html
<!DOCTYPE html>
<html>
<head> ... </head>
<body>
<div id='main'>
(HTML VERSION OF MARKDOWN
</div>
</body>
</html>
If I leave out the div container, the markdown is translated perfectly and placed at the top-level of <body>. What I would like to do is simply place in in a child container of body, thus allowing me to have finer control over the formatting of the contents.
Any ideas?
In your call to markdownToHTML set an option called fragment_only:
markdownToHTML(..., options=c('fragment_only')
That'll skip putting it in a body, I believe, and then you should be able to do with it as you will.
You should be able to specify that in a call to knit2html as well, as part of the ... argument.
Related
I've used gridsetapp.com in the past to create responsive grids, but on the one I've recently tried creating just isn't working and I can't figure out why.
The link to the css is here; https://get.gridsetapp.com/37722/
Just trying to get something basic:
<html><head>
<link href="https://get.gridsetapp.com/37722/" rel="stylesheet" />
</head>
<body>
<div class="d1-d5" style="background:#aaa">ffggg</div>
</body>
</html>
Any thoughts?
Despite an unusual CSS link, the browser should recognize the CSS file your referenced.
However, looking at your reference, you are just trying to apply CSS to the class d1-d5. However, as best I can tell, there is no exact match in the CSS file to Just d1-d5. Use the Development tools (F12 on most browsers); they are your friend. It will show you what CSS is applied at that moment including, any applied through JavaScript or Linked files.
With CSS, you need to make sure that you call out exactly what the browser can identify, but not more (unless going for a higher order of precedence). For example, the most you could call out to select your d1-d5 is:
html body div.d1-d5{...}
Whereas in you linked CSS file, I see a lot of parents or children when searching d1-d5, such as .d1-d5 .d1,.d1-d5 .d2,.d1-d5 .d3,.d1-d5 .d4,.d1-d5 .d5.
If you wanted the last one in this chain (.d1-d5 .d5), you would need an HTML such as:
<html>
<body>
<div class='d1-d5'>
<div class='d5'>
This text will have the CSS applied.
</div>
</div>
</body>
</html>
The CSS written as .d1-d5 .d5 literally means "select the element with class d5 as a descendent of an element with class .d1-d5". Your HTML doesn't match any of the classes in the CSS file, including the parent and child selectors. If you were to try the above HTML, you would see width:18.05273834%; applied (which isn't a very obvious thing to see... why not try background:yellow; or something like that for an easy verification).
Finally, why are you inline styling when you have the CSS? This is bad form, and only appropriate if you can't control the CSS file.
Given some very basic html using flexbox, I can achive a screen with a header, footer and a content area that fills all the space in between:
<html>
<body style="display:flex;flex-direction:column;flex-grow:1">
<div style="display:flex;flex-direction:row">Header</div>
<div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
<div style="display:flex;flex-direction:row">Footer</div>
</body>
</html>
Header displays at top, footer at the very bottom.
+++++++++++++++++++++
+ Header
+ Content Area
+
+
+
+
+ Footer
+++++++++++++++++++++++++
However, if I try to achieve the same thing within Aurelia (using the webpack starter kit) the grow seems to be ignored on both the body and the content elements.
index.ejs -- comes with starter kit I added styling to original file
<body aurelia-app="main" style="display:flex;flex-direction:column;flex-grow:1">
app.html -- changes to original starter kit file
<template>
<div style="display:flex;flex-direction:row;">Header</div>
<div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
<div style="display:flex;flex-direction:row;">Footer</div>
</template>
I also tried adding flex to <template style="display:flex;flex-direction:column;flex-grow:1">
Everything looks good when you inspect the page -- in fact, looks almost exactly like the basic html example. However, the body and the div containing the Content Area do not grow to fill the height of the page.
I tried to get an example working in Plnkr but it actually has the same problem as Aurelia. I noticed that it is using shadow element just like Aurelia does -- I'm guessing that may have something to do with it?
For it to work with Aurelia (or alone), you should layout the markup like this
<body aurelia-app="main" style="height:100vh;margin:0;display:flex;flex-direction:column;">
<my-template style="display:flex;flex-direction:column;flex-grow:1">
<div style="display:flex;">Header</div>
<div style="display:flex;flex-grow:1">Content Area</div>
<div style="display:flex;">Footer</div>
</my-template>
</body>
where the <template>, if it gets rendered, needs to be <my-template> for it to work, as the <template> tag has a special meaning and won't render visually, see MDN; https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template.
Then the body (or any main element) needs a height, and here I used height:100vh.
Also do note, the flex-grow you had on the <body> won't apply if not its parent, the <html> also has display: flex
Hiall,
could someone please tell me, is the
<div class="container">
class/element some kind of special class for wordpress???
This div is currently wrapping all the content on my site and I am trying to put html code outside of this div, but no matter what I do it won’t let me and it automatically puts everything inside this div.
I’m looking at the file that contains the ending
</body>
</html>
tags for the document and when I try to put code right before the end like
<div class=“myotherrclass”></div>
</body>
</html>
When I load the page in the browser the last tag before , it automatically always puts the closing tag for the container div! eg.
<div class=“myotherrclass”></div>
</div> <!— container class closing div, automatically appears from no where! —>
</body>
</html>
Any help trying to understand what is happening would be great
I started with the Underscores.me starter theme and just deleted the "container" div from both header.php (the opening) and footer.php (the closing). And...nothing bad happened! Will report back if something does, but right now I'm deleting div tags not being used in order to make sense of what's going on. This one's gone!
I'm trying to figure out how to add CSS in Genshi to some markup which is dynamically generated. I'm trying to avoid inline CSS, and ideally the rules would appear in the <head/> tag of the parent document.
I'm working with existing code that looks like this (I rewrote this from the original, to simplify, so I might have some syntax mistakes; but the original works, so I think you can ignore syntax mistakes if any):
templates/widgets/file_widget.html
<html xmlns:py="http://genshi.edgewall.org/"
xmlns:xi="http://www.w3.org/2001/XInclude"
py:strip="">
<head>
<style type="text/css">
.file-widget {
background-color:#eee; display:inline-block; padding:4px;
}
</style>
</head>
<py:def function="file_widget(file_name)">
<div class=".file-widget">
...
</div>
</py:def>
</html>
widgets.py
class FileWidget:
...
def html():
markup_template = genshi.template.MarkupTemplate('''
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://genshi.edgewall.org/" xmlns:xi="http://www.w3.org/2001/XInclude">
<xi:include href="my_project/widgets/file_widget.html" />
${description}
${file_widget(file_name)}
</html>''')
markup = markup_template.generate(file_name = self.file_name, description = genshi.core.Markup(self.description))
return markup.render('html', doctype = 'html')
templates/main_page.html
<div py:for='widget in app.widgets'>
${ genshi.core.Markup( widget.html() ) }
</div>
Unfortunately, the <style/> tag gets rendered twice: once, as I want it to be, inside the original document <head/>, and then the widget <head/> gets rendered again.
How can I change the code to properly include the CSS in the right place? Since this is collaborative code, little changes and clearer code are appreciated!
Thanks for reading and for your help.
You might want to use a widget library like ToscaWidget2 which is meant to actually manage widgets with resources.
Otherwise you might want to use a static files framework like fanstatic which provides support for resources inclusion: http://www.fanstatic.org/en/1.0a5/quickstart.html#including-resources-with-fanstatic
If you want to roll your own custom solution you should register the resources somewhere whenever the widget is rendered (like in request) and then add them to the head tag when template is rendered. This is actually what tw2.core.resources does: https://github.com/toscawidgets/tw2.core/blob/develop/tw2/core/resources.py
I am including styles in normal way like this:
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
this styles has a lot of styles which destroy my main view, it applies to body element, is it possible to applay the style only to one particular div?
Put that <div> into a separate page and include bootstrap CSS only in that page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
</head>
<body>
<div>This is your DIV</div>
</body>
</html>
Your main page won't be touched by that and you'll be able to display that div inside your main page simply using an iframe, change (for example) this:
<div>This is your DIV</div>
To this:
<iframe src="url of the other page"></iframe>
Of course you may need to change little bit the logic of your page to accommodate this (primary I guess because of server side C# code, for client side JavaScript code it should be easier because the come from the same domain).
Yes, you can do that by ID:
<div id="myDiv"></div>
and then the CSS would be:
#myDiv { ... }
and that will apply that style to anything named myDiv. You could also use classes:
<div class="someClass"></div>
and then the CSS would be:
.someClass { ... }
and that will apply that style to anything with that class attached.
Based on what you're describing, surrounding the generality of the CSS that's breaking the already defined CSS, you're going to want to get rid of those general element styles and use ID's because it sounds like you're trying to merge some CSS.
You try to remove all styles of body with javascript code, and after that, after you add a name/id to the body style in your correct css, set this as class attribute of your body. (js code too after the document is completely loaded)
Another (stupid) solution depends on what do you have in the css file. Do you can edit the /css/boostrap.css, simply replace all body word with ".body1" (fe => make a class from it)?