slim(4621✨)

用于代码瘦身。


git:  https://github.com/slim-template/slim 

不同编译器有不同的高亮等工具,在git最底部。

atom: 直接从设置里面搜索language-slim选择下载最多的那个。然后自行设置。

可选: 

Auto Ident自动缩进。

Scroll Past End 窗口下面增加一大段空白,可选。 

Show indent GuideShow Invisibles都选上,代码结构更清晰。

Preferred Line Length 设定每行字符数,超过了就换行必须和soft Wrap At。。。一起用。

Soft Wrap 根据编辑器的窗口宽度来自动换行。和Soft Wrap Hanging Indent一起用,下一行选择缩进的字符默认0,设置2最好,关键字不会断,会换行显示。。 


HTML  

text输出:| 和 '

p
  |  This is a test

等同于 

<p>This is a test</p> 

p
  | <h1>fuck you!</h1>

可以插入HTML代码,等同于

<p><small>fuck you!</small></p> 

p
  '
    This is a test

一个单独的 ,和pipe类似,不过文本最后会加一个空格,等同于

<p>This is a test </p> 

Inline html <作用和  |  类似,可以直接写Html tags

 这样Slim和Html可以混合用。

<div>
  <span>hello

一定写上</span></div> 

否则,后面的代码都会放入这个div中了。

Control code -,  代表了控制代码,如条件和循环 

不能在最后添加 end . 块是通过缩进定义的。如果你需要多行,可以在每行后添加一个

。如果本行以逗号,结束则无需添加blackslash 。相当于<% ...%>


- if 3 >4
  | 耶耶耶
- else
  | NO

Output =

相当于<%= ... %>, 同样,换行使用 \  , 也同样,逗号 相当于换行符。 

另外,=> =<等同于=。 ⚠️注意 => 后面有个空格,  =<前面有个空格 

= javascript_include_tag \

      "jquery",

      "application" 

Output without HTML escaping == ❌不明白 

Code comment /

会生成注释,颜色变淡代表成功。快捷键不变command + /  

HTML comment /!

同样,注释颜色会变淡。 

P
  | his is a test
  /!ddd  

会生成,产生一个HTML的注释,<!-- >

<p>his is a test <!--ddd  --></p>

猜你喜欢

转载自www.cnblogs.com/chentianwei/p/9240544.html