Is it possible to do this in AsciiDoc? I tried to stylize it using bootstrap CSS:
:stylesheet:
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
The attribute :stylesheet: works with local files only.
You can write a local CSS style.css and then include it in your doc.adoc like this.
// style.css
#import "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";
// doc.adoc
:stylesheet: style.css
To make the result look pretty, you'll still need to write more CSS to match the classes the Asciidoctor HTML output uses.
The following page might help you: https://asciidoctor.org/docs/produce-custom-themes-using-asciidoctor-stylesheet-factory/
As I just learned from https://stackoverflow.com/a/29456923/200509 , asciidoc has a passthrough block functionality which allows to insert snippets of raw HTML, i.e. CSS or JS code or references, into the rendered output.
Accordingly, putting this somewhere in your .adoc file should work:
++++
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
++++
Related
What is the best way to order a CSS file of a custom theme at the bottom of in Magento 2. By example, I would like place CSS after or before an other.
Thanks
Unfortunately there is no way to position your CSS files. You can however add the media attribute to the css element. This will add it to the end of all the included CSS in the head.
<head>
<css src="css/styles.css" media="all" />
</head>
I want to use a theme cloned from GitHub into my themes directory for almost all pages and articles and automatically-generated pages except for my landing page whose template is not part of the cloned theme and which uses its own particular css..
Currently my working site uses a new template file and related images, js and css files added to the cloned theme. But that's not what I want.
I want to keep separate the landing page's template and related files from the cloned theme but don't understand what settings and / or content file's metadata to use to point to a different theme path just for that one page
i.e. I want to override the THEME settings on just one page.
Settings THEME, CSS_FILE, DIRECT-TEMPLATE and TEMPLATE_PAGES don't seem to be exactly what I want. But maybe they are?
You have a couple of different options. Personally, I'd go with the first method, but I've used all three of these in different situations.
The index.html method
With this method, you create an index.html file that is straight up HTML - exactly how you want your index.html page to look. You can use Jinja variables in it, which is important if you're including CSS that's in your theme (as opposed to using hosted libraries), but mostly, it just looks exactly like you want it to look. A very simple example:
<html>
<head>
<title>My Title</title>
<link href="{{ SITEURL }}/theme/css/mystyles.css" rel="stylesheet" type="text/css">
<body>
<h1>Hello world!</h1>
</body>
</html>
You can then tell Pelican not to render .html files by including this line in your pelicanconfig.py:
READERS = {'html': None}
This will not prevent Jinja from processing Jinja templates in the HTML document.
Finally, because you aren't including any metadata about the HTML file in the HTML file itself (that's what the READERS = {'html': None} business is all about), you have to tell Pelican where to put the final index.html, by setting the TEMPLATE_PAGES variable, also in your pelicanconf.py file:
TEMPLATE_PAGES = {
'index.html' : 'index.html'
}
Now you can see your page by going to localhost/ in your browser.
If you wanted to put the file at a different location, you can specify any location you want:
TEMPLATE_PAGES = {
'index.html' : 'mydirectory/mypage.html'
}
which would make your page accessible at localhost/mydirectory/mypage.html.
Include alternate CSS file in Markdown
Since most HTML works verbatim in Markdown posts, you could also modify your landing page Markdown file to include a CSS file at the top,
Title: My Index
Author: Clark Kent
Date: 2010-12-03 10:20
Category: StackOverflow
<link href="{{ SITEURL }}/theme/css/mystyles.css" rel="stylesheet" type="text/css">
# Hello World
Welcome to the landing page!
Add metadata to control theme
Lastly, you could modify the theme directly to include a metadata attribute that controls what stylesheets the theme uses. For example, let's use the WhichTheme: metadata flag. We'll specify WhichTheme: index for our index Markdown page, and WhichTheme: notindex (or nothing) for all other pages. Then in our theme files, we'll look for the template used to render all pages (usually pages.html), and we'll add a Jinja conditional to check for our new variable, which is accessible at page.WhichTheme:
{% if page.WhichTheme=='index' %}
<link href="{{ SITEURL }}/theme/css/mystyles.css" rel="stylesheet" type="text/css">
<h1>{{ page.title }}</h1>
{% else %}
<h1>{{ page.title }}</h1>
{% endif %}
Can I make the generated HTML page from my DDoc-marked-up D program use richer coloring and type-setting? The default is black-and-white.
I'm currently calling DMD as
dmd -debug -gc -unittest -D -Dd$OUTPUT_DIR
Well, you should probably read through http://dlang.org/ddoc.html to get some of the details, but ultimately, what you need is a css file which tells it how to present the page. That can be set via the DDOC macro.
What I'd suggest doing is taking a look at https://github.com/D-Programming-Language/dlang.org, which contains the code for dlang.org - including the ddoc stuff. In particular, you want to grab std.ddoc along with the css, images, and js folders (as they are all referenced by std.ddoc). If you then give std.ddoc to dmd as part of your documentation build and have those folders in the parent directory of the documentation, the generated documentation should end up looking like the documentation on dlang.org. If you want to put the folders elsewhere, then just tweak the paths to them in std.ddoc.
If you want to change what the documentation looks like, just adjust std.ddoc and the css files accordingly. At that point, it's html and css stuff that you're dealing with, so you'll have to have some clue how those work to make the necessary changes to either the macros in std.ddoc or to the css files themselves. And of course, if you want to do anything with the js files, you'll need to know javascript. You can strip out all of the js and images if you want to. They're just what's used for dlang.org, but again, you'll have to have some clue how html and friends work to know what to do with that. I'm not particularly well versed in any of that, so when I've generated documentation, I've typically made only minimal changes to what dlang.org uses, but all I've typically been looking for is to get more legible colors than the default rather than anything specific.
Sorry that I can't be more specific or helpful than that, but the best that I've done with it is stumble through it enough to get pages looking like dlang.org, since I know next to nothing about web development. Hopefully this will point you in the right direction though.
Something else that you might want to look into is ddox, which uses ddoc comments to generate better looking documentation than dmd does. And it's likely that dlang.org will be switching to using ddox-generated documentation sometime in the relatively near future (some of the details still need to be sorted out, so I don't know when exactly, but that's the current plan). So, using ddox may ultimately end up becoming more common than using dmd to generate the documentation.
You can create your own .ddoc config file in which you override or create new ddoc macros to use class names and id's. Then you can style the page using CSS.
Sample .ddoc file containing custom CSS, Notice the theme.css file in the head HTML section:
DDOC = <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" href="theme.css" rel="stylesheet" media="all" />
<title>$(TITLE)</title>
</head>
<body>
<h1>$(TITLE)</h1>
$(BODY)
</body>
</html>
H2 = <h2>$0</h2>
H3 = <h3>$0</h3>
STRONG = <strong>$0</strong>
EM = <em>$0</em>
DDOC_DECL = $(H2 $0)
DDOC_DECL_DD = <div class="declaration-description">$0</div>
DDOC_CLASS_MEMBERS = <div class="class-members">$0</div>
DDOC_SUMMARY = $(P $0)
DDOC_DESCRIPTION = $(P $0)
DDOC_MEMBERS = <div class="members">$0</div>
DDOC_ENUM_MEMBERS = <div class="enum-members">$0</div>
DDOC_MODULE_MEMBERS = <div class="module-members">$0</div>
DDOC_STRUCT_MEMBERS = <div class="struct-members">$0</div>
DDOC_TEMPLATE_MEMBERS = <div class="template-members">$0</div>
This file should be saved somewhere and added to the sc.ini file (in the case of Windows) or the dmd.conf file (in the case of Mac/Linux) like this:
DDOCFILE=myproject.ddoc
Then the next time you compile using -D, HTML is read from the custom ddoc macros instead of the built-in stuff and viola, you have style-able class names and id's to use with CSS.
Here's a preview of pretty documentation using a custom style-sheet and macros: http://htmlpreview.github.io/?https://github.com/kalekold/dunit/master/docs/dunit/toolkit.html
HTML files: https://github.com/nomad-software/dunit/tree/master/docs/dunit
Full ddoc macro listings can be found here: http://dlang.org/ddoc.html
I have a site with a fairly complex structure of Smarty templates. For this question, suppose I have an outer template which includes (with {include}) one or more inner templates that are optionally included, depending on the data being displayed:
Outer Template (with <html>, <head>, and <body> tags)
- Inner Template A (various content)
- Inner Template B (more content)
Sometimes, one of these inner templates needs to reference additional CSS files. I would prefer to have these within my <head> tag, for efficiency and to avoid FOUC. Is it possible to set some variable from Inner Template A that adds the appropriate <link> tag to <head> within Outer Template?
I was able to find someone who created a module to do something similar, but I don't know how I would set the necessary variables from the template to make it work in my case. I am using Smarty 3.
I had a similar issue some time ago. My solution is maybe dirty but maybe it could help you.
$css = '<link rel="stylesheet" type="text/css" href="/css/file.css">';
$smarty->registerFilter('output',create_function('$output','return preg_replace(\'/(<\/head>)/i\',\''.$css.'$1\',$output,1);'));
If you wrap this in a function, you can simply add css to your head section from everywhere.
Idea 1:
Wrap the same logic around the style sheet in your head that you use for displaying template A or B.
Idea 2:
Template 1 (Top Level):
<link rel="stylesheet" type="text/css" href="whatevs1">
{block name="childStyles"}
{/block}
Template 2 (Child Template):
{block name="childStyles"}
<link rel="stylesheet" type="text/css" href="whatevs2">
{/block}
A side note:
I understand the want to be W3 compliant using includes for stylesheets in HEAD but including them within the body wont break your html, even in IE7...
I encountered a similar obstacle a few years ago. Since smarty templates are almost all the time filled with php code, my solution is just declaring a special variable/array for this purpose in php, then looping through the array in your head template / outer template.
Example:
$your_special_css = array('css1.css', 'css2.css');
Somewhere else in your code...
$your_special_css[] = 'css3.css';
...and then give it to the template:
$your_smarty_template->assign('your_css', $your_special_css);
Then your outer template would look like this:
<head>
...
{foreach $your_css as $css}
<link rel="stylesheet" type="text/css" href="/css/{$css}">
{/foreach}
...
</head>
Same works for jscript-files, too.
Example CSS
#wrap{margin:20px}
Code prettify wraps the whole line in .com
<span class="com">#wrap{margin:20px}</span>
Somebody has a similar issue here.
Where someone answers "Are you loading lang-css.js?".
Here's what I'm loading in the footer.
<script src="/js/google-code-prettify/lang-css.js"></script>
<script src="/js/google-code-prettify/prettify.js"></script>
I can see both of them with web inspector. I tried changing the order and loading them from the header. I'm using the latest version.
All help is greatly appreciated :)
Thanks!
The order you link to the javascript files matters. You need to call the base code (prettify.js) first followed by the css specific code (lang-css.js). You can place the script tags either in the head section or at the end of the document... both work but placing at the end of the document will speed up the page load.
<script src="/js/google-code-prettify/prettify.js"></script>
<script src="/js/google-code-prettify/lang-css.js"></script>
You will also need to ensure that you are linking the stylesheet in the head of your document.
<link rel="stylesheet" type="text/css" href="/css/prettify.css">
You also need to add the correct classes your pre tag(s). The syntax-highlighting functions contained in lang-css.js will not be called without adding the class "lang-css" to the <pre> tag.
<pre class="prettyprint lang-css linenums">
Finally, make sure you call the "prettyPrint()" function on page load.
<body onload="prettyPrint()">