For a heading, for a code-block, for a span element we can with pandoc add {.class} to add a class.
# Heading 1 {.my_class_for_heading1}
Here is some `code`{.my_class_for_code} and
for a [span]{.my_class_for_span} it is working as well
and for img and url it is available as well
for [pandoc](http://www.pandoc.org/){.my_class_for_url}
I'm working with bootstrap, and it would be nice to specify "table" and/or "table-hover" as class such that the html view gets the table decorated with bootstrap CSS.
Anyone?
In pandoc's internal document AST, tables have attributes since pandoc 2.10, but the markdown reader hasn't been updated for that yet. (Same for other formats.)
However, you can:
wrap a table in a raw HTML div with a class (this won't work for bootstrap CSS which expects the class to be on the table),
write a pandoc filter, or
probably in this case easier: post-process the output HTML to add a class.
Related
I use AE Templates in Wordpress to create templates which are used around the website, so I don't have to change every occurrence of a single template every time I need to update some information. In my case I have tens of these templates which are exactly the same apart from some text and an image, so they all have exactly the same CSS except for some unique identifiers in classes.
Here's an example:
.elementor-3464 .elementor-element.elementor-element-380443b9 > .elementor-element-populated{
some-rules;
}
This is a line of CSS which is the same for all templates, except 3464 and 380443b9 change from template to template.
It seems a waste of code to me to load all CSS files for every web page with multiple templates with the same CSS. Is there a way I can target all templates by rewriting the above line to be arbitrary for any ID number/sequence (3464 and 380443b9)?
I was hoping I could use the [class*=...] selector but it doesn't work.
I tried this as a replacement for the above example:
[class^="elementor-"] [class*="elementor-element-"] > .elementor-element-populated{
some-rules;
}
The [class^="elementor-"] will only work if the class list begins with "elementor-". If there is another class before it, e.g. class="elementor elementor-1234" then it will not work.
You might need to use:
[class*="elementor-"] [class*="elementor-element-"] > .elementor-element-populated{
some-rules;
}
I managed to add HTML (text only) to a Word-document following this post Add HTML String to OpenXML, using an already existing Word-file.
Unfortunately, I can't find any solution to use style from this Word-template for my newly added text. It is always "Times New Roman" size 12px although the standard style of the used template is "Arial" size 9px.
So fare I tried:
Using the ParagraphProperties as I would do for not HTML texts.
Paragraph para = body.AppendChild(new Paragraph());
Run run = para.AppendChild(new Run());
run.AppendChild(altChunk);
para.ParagraphProperties = new ParagraphProperties(new ParagraphStyleId() { Val = "berschrift2" });
Turnig MatchSource off
AltChunkProperties altChunkProperties = new AltChunkProperties();
altChunkProperties.MatchSource = new MatchSource() { Val = new OnOffValue(false) };
altChunk.AppendChild<AltChunkProperties>(altChunkProperties);
Any suggestions?
EDIT:
I found a workaround, which isn´t really a solution for my question, but works for me. I'm no longer trying to use the style from word, but adding the styles to my html before using altchunk.
Some explanation: if you look at the definition of altChunk in ISO 29500-1 17.17.2.1 and specifically in the A.1 section, the schema shows that altChunk is a EG_BlockLevelElts element and this is a peer with paragraphs (i.e. ). It is technically not correct to add as a child to run elements or even paragraph. It should be added at the body level. The fact that Word doesn't complain when adding as a run or paragraph child is unintentional and shouldn't be relied on.
As a result, what Word is doing is using the default style property for fonts to format this new content. You can try this by changing the document defaults in the styles.xml part. With match source property set to false, there isn't a way to specify the font besides document defaults.
Having said that, I think that Thomas' alternative is a better way to go.
The real solution for your question is to transform HTML into Open XML markup "yourself" rather than relying on the alternative format import parts in conjunction with w:altChunk elements. This creates a dependency on how Microsoft Word handles the import, often with little control on your side.
How do you transform HTML (or XML in general) to Open XML markup? The best way is to write so-called recursive pure functional transformations, which translate HTML elements and attributes to Open XML elements and attributes. If you have really simple HTML documents, that is not a big task. However, doing this for "arbitrary" HTML and CSS is quite a feat.
The good news is that the Open-XML-PowerTools, an Open Source library, contain functionality to transform HTML to Open XML and vice versa. Thus, I'd recommend you have a look at that library.
What worked for me and for my situation (if you don't want to go down the rather complex openxml powertools html converter root) is to add a HTML style attribute to the body section of your HTML fragment as follows:
Encoding.UTF8.GetBytes(
#$"<html><head><title></title></head><body style=""font-family: Calibri"">{ConvertUnconventionalUnicodeCharsToAscii(htmlAsString)}</body></html>");
It might be possible to dynamically derive the font family of the "normal" style embedded into the document you are updating and insert that name into the style attribute if deemed compatible.
That way, if you decide to change the base/ normal font the style of the HTML import will attempt to utilise the same font family.
Sorry if a bit off topic, I also could not get alternativeFormatImportPart.FeedData() to process "’" (code 8217) UTF-16 characters and so had to specifically replace them with "'" (code 39) in order to avoid them from being rendered as the following sequence ’
I just finished creating a site with a few HTML pages and a CSS style sheet. Near the end of the project I decided I would like to change some of the class names.
Example:
In my CSS I have .classname and in my HTML I have quite a few tags linked to that css class using
class="classname"
I would like to change .classname to .class-name in my CSS Style Sheet, however, if I do this I would have to go through thousands of lines of code in my html pages to find and change all the class names from class="classname" to class="class-name"
is there a program that can be used that allows you to change a class name in the css and it will go through all html pages and change it there as well?
I use dreamweaver. Is there a way to do this in dreamweaver?
Note: I have tried using the find and replace options in dreamweaver however this does not fully work.
I'm not able to search "class="classname"" and replace it with "class="class-name" because some tags use "class="example someclass classname test""
I'm not able to search "classname" and replace with "class-name" because "classname" can be found in between <p></p> as content and I do not want it to change here.
Thank you!
I am not familiar with DreamWeaver options, but if you have a preferred advanced text editor (I use NPP) you can use regex.
I would try an expression such as (?<=class="[^"]*)(classname)(?=[^"]*")
And replace that
Should I be using class names in HTML page that describe it completely, eg. navbar-static-8 to describe a fixed navbar containing 8 items?
Or should I be wrapping the metadata into separate attributes e.g. type="static" items="8".
I want such names to be parsed in javascript.
Cleaner would be to use data attributes like:
<div data-type="static" data-items="8"></div>
John Resig wrote a nice article about this http://ejohn.org/blog/html-5-data-attributes/
But if "static" refers to something you want to use for the design of the item, you should use classes since these are designed to be used in CSS. The data attributes are more used in Javascript as meta data about the object.
yes you can use navbar-static-8 type of name of class , and you can 'type="static" items="8"' your custom attribute but test on all browser (specially Intenet Explorer)
You should use descriptive class names for a intuitive css use, like "navbar navbar-static" and use the html5 data for js, like data-navitems="5"
Make use of cascading, use two css classes, navbar to describe general nabvars properties, and navbar-static to describe styles only for the static navbars.
I know that id selector is used to specify a style for a single element. My question is, if I have a project and it has multiple php files, can these php files contain elements with same id?
Here is example:
php file 1:
...
<body>
<h1 id="test">header1</h1>
</body>
...
php file 2:
...
<body>
<h3 id="test">header3</h3>
</body>
...
css file:
#test
{
color:red;
}
This usage is correct or not?
If they are all rendered in the same HTML page in the browser, it's incorrect as ID should be unique on a single page. If only one is ever rendered then it'll be a-ok.
If you want your Web pages to validate as XHTML or HTML, then you should have unique IDs on your pages.
Yes, that is correct. In fact, that is a good idea. If you do that, you can use the same stylesheet on both pages. As long as you don't combine the files, it's a great idea.
What you are doing is fine, but it looks like class is better for what you are trying to do. You typically use ID to specify a specific element on a specific page and class to apply styling to different elements, on the same or different pages.
Using the same ID on multiple pages WILL work, but imo class is the more proper thing to use.
The id should be unique for each element per (HTML) document.
So, unless you combine the output of your PHP files into a single HTML file there is no problem. In page1 your one h1 heading will be red, in page2 your one h3 heading will be read, etc.
Personally, I prefer CSS classes for appearance and DOM IDs for functions, but they can be mixed.