Is there a way to create my own abbreviations in atom and sublime like I can do with notepad++?
for example:
I have a chunk of code:
<!DOCTYPE html>
<html>
blah... blah... blah...
</html>
With notepad++, I can just use shortcut to wrap it with abbreviation (e.g.: html) and next time I can just type html and expand it, it'll pop out all the code. Instead of all the $>>>>** like in Sublime.
I've read a dozen of manual online for sublime and atom but honestly, I still don't get it.
Update:
Sublime > Tools > Developer > New Snippet...
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html>
Blah blah blah
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>html-blah</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.python</scope>
</snippet>
So after successfully saved the snippet, I type html-blah, there's no tab option.
The answer to your question (in the case of Sublime) is indeed Snippets as you've mentioned. They're a powerful way to include all sorts of text, including the ability to put placeholder fields that allow you to fill out more complex structures quickly and easily.
As outlined in your question the snippet you've defined will only have an effect in a Python source file because the scope is set to source.python.
Presuming that you want to use it to create a stub HTML document, you need to change the scope to text.html instead so that it will trigger from within HTML documents.
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html>
Blah blah blah
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>html-blah</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.html</scope>
</snippet>
You can determine the scope to use by placing the cursor in a file that you want to trigger the snippet in and selecting Tools > Developer > Show Scope Name from the menu. That command shows you the full scope of the character at the cursor, and the more of it you include in your scope the more dialed in your snippet becomes.
For example, a scope of text works in all text files, text.html works in HTML based files like HTML and Markdown, and text.html.basic only works in HTML files but not Markdown (which are text.html.markdown).
Something to keep in mind is that the scope is based on the syntax that is set for the file, and by default all new tabs in Sublime are created using the syntax for Plain Text, so before the snippet will trigger you need to assign the appropriate syntax.
You can do that by:
Saving the file with an appropriate extension
Selecting the appropriate syntax from View > Syntax in the menu or by clicking on the type of the current file in the bottom right of the window (both open the same menu)
Selecting the appropriate Set Syntax: command from the Command Palette.
For more information on the power of snippets I recommend the Unofficial Documentation, which includes a section on Snippets.
Note that there is already an existing snippet that ships with Sublime named html that does something similar to your example already.
In sublime you need to install the Emmet package. It is easyer done by using the Package control. There are instructions on how to install it in the github repo: https://github.com/sergeche/emmet-sublime#available-actions
Sorry for mistaking your issue with snippets :)
Related
I have a Python script that reads a CSV file, performs some calculations, and then publishes the results in the form of a table on my WordPress site. The tables are currently being created using the classic editor, but I would like to change their appearance to block editor as they look nice. Is there a way to modify the table properties inside the code or let code create them in block editors when posting the results using the in WordPress?
The Block Editor saves block content into markup, eg. for a simple table block:
post_content
<!-- wp:table -->
<figure class="wp-block-table">
<table><thead><tr><th>Column A</th><th>Column B</th></tr></thead>
<tbody><tr><td>Apples</td><td>Banana</td></tr></tbody></table>
</figure>
<!-- /wp:table -->
Assuming your Python script outputs a valid HTML table, you could wrap the table output with:
<!-- wp:table --><figure class="wp-block-table"> ... <figure><!-- /wp:table -->
This would define your table output as a block when inserted into post_content. The caveat is that the markup must be valid and parsable to be later edited it within the Block Editor and display correctly.
It seems that when examining the scope of a PHP file, whose extension is .php, and whose syntax is correctly recognised as PHP, Sublime will still report it as text.html.basic (among others). This makes my HTML snippet always execute in it.
Since what I want is to make a snippet that has todo as its tabTrigger, to insert a commented out tag, obviously i need it to be different for the different filetypes (<!-- --> or /* */). But this way, the <!-- --> comment gets inserted into the PHP file...
Is there an extra detail i'm missing, or is this a bug?
The PHP syntax in Sublime Text is an extension of the HTML syntax, meaning all HTML is valid in a .php file, plus the extra <?php … ?> tag. If your cursor is in a .php file, but outside the <?php tag, the scope will be embedding.php text.html.basic and comments should take the <!-- … --> HTML form.
Once you're inside that PHP tag, you now have an additional scope of source.php. Comments now should use PHP comments /* … */ and/or // ….
For your snippet, just set the scope as source.php, and it should only trigger inside actual PHP code.
If you want your snippet to trigger only in HTML, and not in PHP, set the source to text.html.basic -source.php.
Note This is all true in the most recent version of Sublime Text 3 (3.2.2, Build 3211). The PHP syntax was entirely refactored earlier, so this may not work correctly with earlier builds. If you haven't upgraded, now is a great time!
In side your PHP tags, you need to use the source.php, while outside of the tags it's text.html.php. You likely want something like this:
PHP
<snippet>
<content><![CDATA[/* TODO $1 */]]></content>
<tabTrigger>todo</tabTrigger>
<scope>source.php</scope>
</snippet>
HTML (PHP)
<snippet>
<content><![CDATA[<!-- TODO $1 -->]]></content>
<tabTrigger>todo</tabTrigger>
<scope>text.html.php</scope>
</snippet>
I am using docsify to build a documentation for my API. However when I insert code block (especially json) the code is written in black.
I don't know how to change it.
Any suggestion ?
Docsify uses Prism for syntax highlighting as explained in the Documentation.
To add support for a specific language you need to add the matching grammar file as so :
<!-- Loading Docsify -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- Adding json syntax highlighting -->
<script src="//cdn.jsdelivr.net/npm/prismjs#1.22/components/prism-json.min.js"></script>
If you want to browse the list of grammar files available you can browse them here : PrismJS on Github
You must add the scripts after the docsify js script. If you add them before, you will see an error in the console that says Prism is not defined.
Add them like so:
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs#1.28/components/prism-bash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs#1.28/components/prism-typescript.min.js"></script>
After that, you can highlight using your new language:
```bash
yarn add fast-data-engine
```
...and it will work as expected.
So every time I use html snippet or boiler plate with <ht + tab or enter
I get this extra opening tag? What gives?
<<!doctype html> <---- whats that additional tag at the beginning?
<html>
......
....
I got emmet installed by the way. Thanks
It's a snippet. You type html (or less), and press tab, it'll inserts all this content:
<!DOCTYPE html>
<html>
<head>
<title>$1</title>
</head>
<body>
$0
</body>
</html>
Note that if you repress tab again, it'll go to $1, and the last one is $0 (by default it's the end of the content).
So, don't type <ht, just ht, tab, and it'll insert everything for you. I really recommend you find yourself a course about Sublime Text, you're going to miss so much otherwise
That is the doctype decleration this is straight out of hte W3School docs:
The declaration must be the very first thing in your HTML
document, before the tag.
The declaration is not an HTML tag; it is an instruction to
the web browser about what version of HTML the page is written in.
In HTML 4.01, the declaration refers to a DTD, because HTML
4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
HTML5 is not based on SGML, and therefore does not require a reference
to a DTD.
Tip: Always add the declaration to your HTML documents, so
that the browser knows what type of document to expect.
You can read more about it here: http://www.w3schools.com/tags/tag_doctype.asp
Following this tutorial I was able to retrieve data form the clipboard.
But I have no idea (nither there's something in the API) about how to insert my string into the xul browser (say, when the user open the 'edit' menu and click 'paste').
Any idea?
--update
There's a cmd_paste here, but there's no hint if I can (and how to) use it to paste in a browser. Also the browser's API available documentation have nothing about.
I tried make it work creating a browser, setting the command attribute (not sure if it exists, the API says nothing, but it's a wiki not much reliable) and a button to paste:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window width="400" height="300"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<browser id="mybrowser" command="cmd_paste" type="content" src="http://www.google.com/" flex="1" />
<button label="TEST PASTE" command="document.getElementById('mybrowser').doCommand();" />
</window>
Nothing happens when I press the button (with data on my clipboard, and a text field selected inside the browser).
--in the xulrunner source
within toolkit.jar, at content/global/editMenuOverlay.xul there's the definition:
<command id="cmd_paste" oncommand="goDoCommand('cmd_paste')"/>
but no "goDoCommand" method is defined there, nither in the only javascript file included: editMenuOverlay.js.
Do you really need a "paste" command? Couldn't you just retrieve the data from the clipboard using the tutorial you found and copy it into the currently focused text elements when the past button is pressed?
After finding the goDoCommand (see the question update) I found out that the function was in the globalOverlay.js file.
So I added to my Xul:
<script type="application/x-javascript" src="chrome://global/content/globalOverlay.js" />
and used the goDoCommand command.
Not yet sure if it's the best or even correct approach to add this js to my Xul, but look likes ok.