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 --version 0.1.0

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

:doctype

to test!

Triggers

Trigger

Result

::docskel

Generates an empty document with

utf-8

and

viewport

headers (unindented)

::doctype

<!DOCTYPE html>

::charset

<meta charset="">

::utf-8

<meta charset="UTF-8">

::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>

::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"
    replace: >-
      <!DOCTYPE html>

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

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

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

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

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

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

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

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

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

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

  - trigger: ":button"
    replace: >-
       <button type="button">$|$</button> 
  
  - trigger: ":style"
    replace: >-
      <style>$|$</style>
  
  - trigger: ":css"
    replace: >-
      <link rel="stylesheet" type="text/css" href="$|$">
  
  - trigger: ":script"
    replace: >-
      <script>$|$</script>
  
  - trigger: ":js"
    replace: >-
      <script type="text/javascript" src="$|$"></script>

  - trigger: ":form"
    replace: >-
      <form action="" method="">$|$</form>
  
  - trigger: ":label"
    replace: >-
      <label for="">$|$</label>
  
  - trigger: ":submit"
    replace: >-
      <input type="submit" value="$|$">

  - trigger: ":input-text"
    replace: >-
      <input type="text" name="" id="">

  - trigger: ":input-password"
    replace: >-
      <input type="password" name="" id="">

  - trigger: ":input-radio"
    replace: >-
      <input type="radio" name="" id="" value="$|$">

Made with