Change the order and style of HTML attribute output with Emmet? - html

Is there any way that I can alter the output order and style of the attributes when expanding an abbreviation in Emmet for Sublime Text 3?
I prefer to have class names as the first attribute on any HTML element, simply so that I don't have to go searching for them when I'm writing my CSS. By default, Emmet expands with the required attributes first where there are multiple attributes to output. Is there any way to make the class attribute show up first wherever it is present?
Secondly, I like my class names double-spaced for clarity. Is it possible to do this too using the abbreviation settings in Emmet?
Example:
Emmet default output
Donate
Desired output
<a class="main-nav__link main-nav__link--accented" href="/donate">Donate</a>

You can try this :
Create snippets.json file in extensions folder to add or override snippets.

Related

pandoc add class to table in markdown

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.

Alfresco html tag properties plain text search

I want to do plain text seach in html files.
It seems that properties values are not indexed.
if i have a html file containing tag like this <div property="property value"> Textual value </div> i can't found this file by searching property value.
Is there a way to make this possible ?
You need to define your own custom metadata extracter.You can fine more information on below link.
http://wiki.alfresco.com/wiki/Metadata_Extraction
For your requirement,
alfresco-community-sdk-3.4.b\src\alfresco-repository-src.zip\java\org\alfresco\repo\content\metadata\HtmlMetadataExtracter.java
Above is the class which is responsible for extracting data from the html file.If you see the content of that file it is neglecting tags and attributes inside tag.So you can take reference of above file and define your own Metadata Extractor

Is there a way to change class names in CSS and all instances found in HTML pages link to the CSS?

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

Same CSS style formatting differently based on pattern

Is it possible to define a style that assigns one set of formatting rules for non-parenthesized text and another for parenthesized? The reason for this is to avoid cluttering of format tags (like <b> or <span>). E.g if I have something like
<B>Item1</B> (expl), <B>Item2</B> (expl2), ..., <B>ItemN</B> (explN)
It would be cleaner to state it as
<span class="myClass">Item1 (expl), Item2 (expl2), ..., ItemN (explN)</span>
Where myClass is defined as formatting parenthesized text under a set of rules different from non-parenthesized (bolding non-parenthesized in this example).
I don't think this can't be done in HTML/CSS but can be achieved by using Javascript. Once the page is loaded (onLoad), you can scan for items (may be using a regex) and then surround the text with custom tags.

sphinx, restructuredtext: set color for a single word

Is there a way to set the color of single words (or characters) in sphinx? I'm pretty sure there should be some markup tag, like HTML's font tag.
On my Sphinx-powered website, I use a combination of:
A restructuredText file containing roles definitions, one for each color - see .special.rst (BitBucket link)
A CSS file containing color rules for each role - see the first lines of hacks.css (BitBucket link)
Then, in every rST file where I need colors, I first import .special.rst at the top, either manually:
.. include:: .special.rst
Or with the rst_epilog configuration variable in Sphinx's conf.py file:
rst_epilog = "\n.. include:: .special.rst\n"
And then each role can be used easily in pure rST syntax:
This is :red:`red !` And :blue:`this part is blue`.
More details are given on this page (in French, sorry).
It works perfectly well for html output (and html-like), but not for PDF. Refer to the first answer above for producing a PDF with colors.
If you want to do this without being tied to html, try applying a different style than normal body text to your word.
In this example adapted from the rst2pdf manual, I apply the existing rubric style which is red in the backend that I am using:
Before red.
.. role:: rubric
I like color :rubric:`rubric`.
After red.
The actual look of the word will depend on how the style you choose is defined in the stylesheet that you use when generating your document.
If you want blue text, make a blue text style and derive it from the normal text style.
The stylsheet is backend-specific and you may be using the default.
To print the default for rst2pdf.py, do this (from the rst2pdf manual):
rst2pdf --print-stylesheet
Continuing the example for a rst2pdf stylesheet, add this to your stylesheet to have a blue text style:
bluetext:
parent: bodytext
textColor: blue
In the document you can reference this style to get a blue word.
Note this bit is generic, and should make blue text if you define a blue style in your html or whatever backend's stylesheet.
Before blue.
.. role:: bluetext
I like color :bluetext:`blue`.
After blue.
The generated pdf has the coloured words:
Sphinx already supports colors with the s5defs.txt standard definition file intended for inclusion (but is missing the CSS file):
Create/append this text to the value of rst_epilog
sphinx configuration, in your docs/conf.py file:
rst_prolog = """
.. include:: <s5defs.txt>
"""
Follow Sphinx's instructions to add a css with the colors
(e.g. adopt the hack.css from #Næreen's answer):
Place your css file into e.g. _static/css/s4defs-roles.css;
append it's path into shtml_css_files sphinx configuration:
html_css_files = ['css/s4defs-roles.css']
You may then use:
Some :red:`colored text` at last!
TIP:
Read this SO if you also want the styling to appear in Latex output.
This works, but leaves the HTML in a separate paragraph.
.. raw:: html
<font color="blue">Blue word,</font>
And a word without color
If anyone has a better answer, I will accept it.
Just a quick note because I landed here looking for something similar for html.
This works on Sphinx v2.0.1 for me. This uses the concept reported by #adam-matan but doesn't cause any formatting issues (i.e. the paragraph problem).
reference: reStructuredText Directives
.. role:: raw-html(raw)
:format: html
:raw-html:`<font color="blue">Blue word,</font>` And a word without color