コピペで絶対動く。説明を妥協しない

Write haml with Atom

投稿日：2017年3月16日更新日：2017年3月25日

English
日本語

Abstract

Hello everybody, it’s candle.
In this time we will write haml with Atom.

I’m coding with emacs for all time. but sotimes I use atom.
When I open a haml file, there is no coloring and syntax, I try to add plugin.

Premise

You have Atom editor.

Install “language-haml”

I heard most famous haml plugin is “language-haml”, let’s install it.
Select “Atom” → “Preferences …” from the menu.

Choose “install” of the left menu, insert “haml” into search field and press enter key.

At the top, press “install” button of “language-haml”.

It’s finish.
You can write haml.

Create hello.haml as a test and write the next text.

= link_to root_path(), class: "big-font whiete" do
  banana
.pokemon.get
  %p#head
    hello world
-# comment out

An addition, you can comment out at the selected line using “Command + /”.

Conclusion

I think that haml is very useful.

If you think this article is good, share it please

-ソフトウェア
-atom, haml

執筆者：candle

comment Cancel reply

: How to prevent preview from scrolling back to top in Atom’s Markdown

English 日本語 Abstract Hello everyone, it’s candle. Atom has a markdown preview function from the beginning. When markdown’s sentence becomes long, every time you edit it, the preview back to the top. And, you have to scroll every time to check. It is so tough, we will put a plug-in that will automatically adjust the preview. Premise Atom has been installed

: Atom imports React component using import-js 2.2.0

Abstract Hello everybody it’s me candle. In this time we will import the component path into the file using import-js and Atom automatically. React recommends to write one component in one file, when development becomes to be big, the number of component increase. If you use 10 components with one Container, you need to write 10 import statements. import-js helps us from such troublesome work. Precondition Already exist React web environment I recommend you use the react project created by create-react-app command which I wrote the before article. Atom was installed in your computer.

: Build flycheck + eslint environment supporting to react + es6 in Emacs.

Abstract Hello everyone it’s me candle. In this time let’s build emacs + eslint. There are many other syntax check packages such as jsHint, jsxHint, etc which check the coding rule of javascript. According to web info, these packages seem to be unable to adapt well with the latest javascript writing format such as React and es6. Nowadays eslint became to be mainstream. It has become used not only in emacs but also everywhere. I’m also emacs user, try it! I’m not a node JS and Elisp professional, it may contains useless writing or wrong writing. Please go easy on …

: How to invert photoshop brush

English 日本語 Abstract Hello everyone. It’s candle. In this time, I’ll show you how to invert brush effect. Precondition Nothing

: Allocate lo0 IP address using Mac login hook automatically

Abstract Hello everyone it’s me candle. In this time we would like to use the login hook of Mac and automatically allocate the local ip address. You can use the default 127.0.0.1 lolcal IP address on your Mac. However when using it with docker, you need to prepare other local IP address separately. Precondition You use Mac.

PREV: How to add extension to Ungoogled chromium
NEXT: Limit the number of text characters in wordpress article index by plugin

Search

Translation

English
日本語

: 2018/12/10

Remove or allow the html tag with javascript + React and take measures against XSS

: 2018/12/07

Use react-simple-format in React web

: 2018/12/05

Hiragino Sans How to write to change weight in css

: 2018/12/03

Lazy load image with react-lazyload

: 2018/11/30

React + S3 + Route53 + CloudFront HTTPS connection using SSL

Profile

I work in the venture company as a CTO. I start to write program in University, first I learned java, C++ and PHP. In the company, I'm developing web services by Rails. I do like to automation.