Documentation

Create Package

HTML utilities package

featured

html-utils-package

By Gabriel Barbosa

A simple package to make coding in HTML5 easier.

frontend

html

development

Paste this command in a terminal to install the package

espanso install html-utils-package

Description

Source

html-utils-package

Make HTML5 easier and less time-consuming with this Espanso package!

Installation

Make sure you have already installed Espanso first.

espanso install html-utils-package

That's all. You can start using the package. Open your favorite editor and type

::docskel

to test!

Preview

You can choose between all of them from the Search-bar:

Triggers

Here you can see some of them:

Trigger

Result

::docskel

Generates an empty document with

utf-8

and

viewport

headers (unindented)

::doctype

<!DOCTYPE html>

::meta-charset

<meta charset="">

::meta-utf-8

<meta charset="UTF-8">

::meta-viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

::meta-author

<meta name="author" content="">

::meta-desc

<meta name="description" content="">

::meta-keywords

<meta name="keywords" content="">

::title

<title></title>

::div

<div></div>

::html

<html></html>

::head

<head></head>

::body

<body></body>

::a

<a href=""></a>

::br

<br/>

::button

<button type="button"></button>

::style

<style></style>

::css

<link rel="stylesheet" type="text/css" href="">

::script

<script></script>

::js

<script type="text/javascript" src=""></script>

::form

<form action="" method=""></form>

::label

<label for=""></label>

::input-submit

<input type="submit" value="">

::input-text

<input type="text" name="" id="">

::input-password

<input type="password" name="" id="">

::input-radio

<input type="radio" name="" id="" value="">

::input-checkbox

<input type="checkbox" name="" id="" value="">

::input-file

<input type="file" name="" id="">

Contributions

If you feel like there's any important tag/snippet missing, feel free to create a Pull Request or open an Issue.

package.yml

matches:
  - trigger: "::doctype"
    label: "HTML - doctype"
    replace: >-
      <!DOCTYPE html>

  - trigger: "::meta-charset"
    label: "HTML - meta-charset"
    replace: >-
      <meta charset="$|$">
  
  - trigger: "::meta-utf-8"
    label: "HTML - meta-utf-8"
    replace: >-
      <meta charset="UTF-8">
  
  - trigger: "::meta-viewport"
    label: "HTML - meta-viewport"
    replace: >-
      <meta name="viewport" content="width=device-width, initial-scale=1">

  - trigger: "::meta-author"
    label: "HTML - meta-autor"
    replace: >-
      <meta name="author" content="$|$">

  - trigger: "::meta-desc"
    label: "HTML - meta-desc"
    replace: >-
      <meta name="description" content="$|$">

  - trigger: "::meta-keywords"
    label: "HTML - meta-keywords"
    replace: >-
      <meta name="keywords" content="$|$">

  - trigger: "::title"
    label: "HTML - title"
    replace: >-
      <title>$|$</title>

  - trigger: "::div"
    label: "HTML - div"
    replace: >-
      <div>$|$</div>

  - trigger: "::html"
    label: "HTML - html"
    replace: >-
      <html>$|$</html>

  - trigger: "::head"
    label: "HTML - head"
    replace: >-
      <head>$|$</head>

  - trigger: "::body"
    label: "HTML - body"
    replace: >-
      <body>$|$</body>
  
  - trigger: "::inline-css"
    label: "HTML - inline-css"
    replace: style="{{element}}:$|$;"
    vars:
      - name: element
        type: choice
        params:
          values:
              - "color"
              - "background-color"
              - "padding"
              - "font-family"
              - "font-size"
              - "font-weight"
              - "border"
              - "padding"
              - "margin"

  - trigger: "::a"
    label: "HTML - a"
    replace: >-
      <a href="$|$"></a>

  - trigger: "::2a"
    label: "HTML - 2a"
    replace: <a href="{{clipboard}}" target="_blank" rel="noopener noreferrer">$|$</a>
    vars:
    - name: "clipboard"
      type: "clipboard"

  - trigger: "::br"
    label: "HTML - br"
    replace: >-
      <br>

  - trigger: "::p"
    label: "HTML - p"
    replace: >-
      <p>$|$</p>

Made with