I just started using Atom editor after switching from Sublime Text 3. I'm having a couple of issues though and one of them is that I have emmet installed but the files I'm using have sytax highlighting set for ExpressionEngine or Craft-Twig not html and this is stopping the emmet shortcuts from working.
Is there a way to set emmet to expand html with syntax highlighting other than html.
so for example:
section>ul.list-inline>(li>a>lorem2)*3 and hit tab expands to:
<section>
<ul class="list-inline">
<li>Lorem ipsum.</li>
<li>Quasi, nihil.</li>
<li>Nam, nobis.</li>
</ul>
</section>
This works if I set the file to html, but I want it to work when set to expressionengine or craft-twig. I had it working like this when using Sublime Text.
You should be able to use extend the snippets, as it's currently done for JSX. The following is taken from snippets.json:
"jsx": {
"filters": "jsx, html",
"extends": "html",
"profile": "xml"
}
Check the snippets documentation for details.
Related
Using <a name="foobar">Hello</a> in the text mode editor and switching to visual mode and back to text editor results in 'Hello'. Using latest wordpress 4.8.2. Anchor tag itself works but not sure why the contents are moved out of the a tag. Any idea?
This is the default behaviour of TinyMCE - the default WP editor, and also used in many other applications.
The format you are using is valid according to the HTML 4.01 spec:
<a name="foobar">Hello</a>
However when you use TinyMCE to insert anchors into content, it uses the following format:
<a name="foobar"></a>
...and it appears that it enforces this structure, even if you manually add an anchor manually with text between the tag.
However, you can use any tag (not just <a>) to define the anchor point, if you need to have text in your anchor. The following example from the HTML 4.01 spec shows an id on a h2 tag being used as the anchor:
Section Two
//...later in the document
<h2 id="section2">Section Two</h2>
So if you want to keep the structure you have, you can change your anchor to
Go to foobar
[...]
<p id="foobar">Hello</a>
Note on HTML5 the name attribute of the <a> tag has been deprecated in HTML 5 - use id instead
Hope that helps :)
I noticed my icons look off when I zoom in to my navigation. I'm using Gulp-iconfont (npm package) with just the default template and styling as in the link is described.
My HTML:
<li class="pageNav_metaItem">
<i id="open-apps-bar" class="icon-apps"></i>
</li>
Rendered font
.svg file.
Can anyone help me with this issue?
As I see, all your icons don't feel well. To fix it add the fontHeight setting to the gulp-iconfont configuration:
// ...
.pipe(require('gulp-iconfont')({
fontName: 'icons',
formats: ['eot', 'woff', 'woff2'],
fontHeight: 1024
}))
// ...
I'd like to add a fontawesome icon to a shortcodes ultimate tab title.
When I try to do it inline
<i class="fa fa-500px"></i>
nothing comes up. Is it possible, either using CSS or some other means?
[font-awesome-icon] Tab text 1
[font-awesome-icon] Tab text 2
[font-awesome-icon] Tab text 3
For using shortcodes, there is a plugin which fetches the latest font awesome icons:
https://wordpress.org/plugins/better-font-awesome/
It works like this:
[icon name="fa-flag" class="fa-2x fa-spin fa-border"]
They have also alternatives syntaxes for previous versions (with the icon- class names).
I'm only looking to format a specific string within a cell. I change that cell's format to "Markdown" but I'm not sure how to change text color of a single word.
I don't want to change the look of the whole notebook (via a CSS file).
You can simply use raw html tags like
foo <font color='red'>bar</font> foo
Be aware that this will not survive a conversion of the notebook to latex.
As there are some complaints about the deprecation of the proposed solution. They are totally valid and Scott has already answered the question with a more recent, i.e. CSS based approach.
Nevertheless, this answer shows some general approach to use html tags within IPython to style markdown cell content beyond the available pure markdown capabilities.
Similarly to Jakob's answer, you can use HTML tags. Just a note that the color attribute of font (<font color=...>) is deprecated in HTML5. The following syntax would be HTML5-compliant:
This <span style="color:red">word</span> is not black.
Same caution that Jakob made probably still applies:
Be aware that this will not survive a conversion of the notebook to
latex.
An alternative way to do that, is to enter a LaTeX environment within the notebook and change color from there (which is great if you are more fluent in LaTeX than in HTML). Example:
$\color{red}{\text{ciao}}$
would display ciao in red.
For example, if you want to make the color of "text" green, just type:
<font color='green'>text</font>
If none of the above suggestions works for you, try using the style attribute.
**Notes**
<p style="color:red;">ERROR: Setting focus didn't work for me when I tried from jupyter. However it worked well when I ran it from the terminal</p>
This gives me the following result
The text color can be changed using,
<span style='color:green'> message/text </span>
I have tested the ideas that I found in these answers in google colabs.
<span style='color:red'>green</span>
$\color{green}{\text{blue}}$
<font color='red'>orange</font>
Of these the 2nd (LaTeX $…$, and html font) versions work. The style version does not work.
Note: the html font element is deprecated. Therefore I am using the LaTeX version.
<span style='color:blue '> your message/text </span>
So here it is a perfect html css style entry inside a notebook ipynb file.
Of course you can choose your favourite color here and then your text.
<p style="font-family: Arial; font-size:1.4em;color:gold;"> Golden </p>
or
Text <span style="font-family: Arial; font-size:1.4em;color:gold;"> Golden </p> Text
This is a very simple and effective trick for google colab.
Use the (empty) link syntax of the markdown.
[your_message]()
Then you'll get the blue text (underline).
Whenever I reformat html source code in Visual Studio with Ctrl-K, Ctrl-D it formats my source code like this:
<p>
text</p>
<p>
more text</p>
How can I make it use the following format instead?
<p>
text
</p>
<p>
more text
</p>
I know that there are settings at Options-> Text Editor -> Html -> Formatting, but I could not find suitable there.
Thanks,
Adrian
Edit: I've checked the tag-specific settings, and page break for p tags is set to "Before opening, within, and after closing". Also, the little preview shows exactly the format I want to have. But Visual Studio still does it wrong. Could this have anything to do with Resharper being installed on my system?
The problem has nothing to do with ReSharper. This is a feature by design of the Visual Studio Source Formatter where it will attempt not to change the semantics of an element due to formatting options that you specify.
So, you specified that you want the p tags to have breaks within the content, but a break after a p tag would change the semantics of the content within the tag, thus the formatter ends up putting the closing p tag right after the content. To have the closing tag on a separate line you will need to explicitly add a space just before the end of the content and the closing tag.
Thus:
<p>content</p>
will produce:
<p>
content</p>
While (note the explicit inclusion of a space between the content and the closing p tag):
<p>content </p>
will produce:
<p>
content
</p>
This is discussed in a blog post by Scott Guthrie in the 3rd paragraph from the bottom. Start counting from the paragraph right above the additional links section.
Click Tools, Options, Text Editor, HTML, Formatting, Tag Specific Options.
Add a new Client-side tag for p (if it's not there already) and select Separate Closing tag and Before, within, and after closing.
Check this How Change Auto Formatting HTML In Visual Studio 2008 2010