ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Crappy line highlights

This commit is contained in:
Rico Sta. Cruz 2017-08-24 18:40:09 +08:00
parent 0c8749580d
commit c5a8c32de8
No known key found for this signature in database
GPG Key ID: CAAD38AE2962619A
4 changed files with 148 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
_includes/2017/head.html
View File

@ -5,15 +5,17 @@
{% include polyfills.html %}
<!-- 3rd-party libs -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/prismjs@1.6.0"></script>
<script src="https://unpkg.com/prismjs@1.6.0/components/prism-jsx.min.js"></script>
<script src="https://unpkg.com/prismjs@1.6.0/components/prism-bash.min.js"></script>
<link rel='stylesheet' href='https://unpkg.com/prismjs@1.6.0/themes/prism.css' />
<script src='https://code.jquery.com/jquery-3.1.0.js'></script>
<script src='https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js'></script>
<script src='https://unpkg.com/prismjs@1.6.0'></script>
<script src='https://unpkg.com/prismjs@1.6.0/components/prism-jsx.min.js'></script>
<script src='https://unpkg.com/prismjs@1.6.0/components/prism-bash.min.js'></script>
<script src='https://unpkg.com/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.min.js'></script>
<link rel='stylesheet' href='https://unpkg.com/prismjs@1.6.0/themes/prism.css'>
<link rel='stylesheet' href='https://unpkg.com/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.css'>
<!-- 2017 layout -->
<link href='{{base}}/assets/2017/style.css?t={{ timestamp }}' rel='stylesheet' />
<link href='{{base}}/assets/2017/style.css?t={{ timestamp }}' rel='stylesheet'>
<script src='{{base}}/assets/2017/script.js?t={{ timestamp }}'></script>
</head>
<body>

9
_sass/2017/components/h3-section.scss
View File

@ -12,8 +12,8 @@
& {
background: white;
box-shadow:
0 4px 8px rgba(80, 100, 150, 0.05),
0 2px 3px rgba(80, 100, 150, 0.1);
0 4px 8px rgba(80, 100, 150, 0.07),
0 2px 3px rgba(80, 100, 150, 0.15);
}
/* Lists */
@ -77,3 +77,8 @@
border-top: solid 1px $line-color;
}
}
.h3-section.-prime > .body {
border: solid 2px $baseA-400;
border-radius: 2px;
}

48
_sass/2017/markdown/headings.scss
View File

@ -70,19 +70,39 @@
* Undo prism theme crap
*/
.MarkdownBody pre {
box-shadow: none;
border-left: 0;
overflow: hidden;
overflow-x: auto;
background: white;
}
.MarkdownBody {
pre {
box-shadow: none;
border-left: 0;
overflow: hidden;
overflow-x: auto;
background: white;
}
.MarkdownBody pre > code {
color: $text-color;
max-height: auto;
padding: 0;
background: transparent;
overflow: visible;
font-size: 1em;
pre > code {
color: $text-color;
max-height: auto;
padding: 0;
background: transparent;
overflow: visible;
font-size: 1em;
}
// Line highlight
.line-highlight {
background: linear-gradient(
to right,
rgba($baseB-400, 0.05) 75%,
rgba($baseB-400, 0));
}
// Line highlight ranges
.line-highlight[data-end] {
margin-top: 0;
}
.line-highlight::before,
.line-highlight::after {
display: none;
}
}

159
react.md
View File

@ -6,11 +6,12 @@ layout: 2017/sheet
{%raw%}
Example
-------
{: .-left-reference}
Components
----------
{: .-three-column}
### Basic example
### Components
{: .-prime}
```jsx
import React from 'react'
@ -32,37 +33,42 @@ const el = document.body
ReactDOM.render(<Hello name='John' />, el)
```
Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output)).
Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output))
### Try it
### Properties
<iframe src="http://jsbin.com/yafixat/edit?js,output" height="400"></iframe>
[Open in jsbin](http://jsbin.com/yafixat/edit?js,output)
{: target="_blank"}
Components
----------
{: .-three-column}
### Class components
```html
<Video fullscreen={true} />
```
```jsx
class MyComponent extends React.Component {
render () {
return <div className='message-box'>
Hello {this.props.name}
</div>
}
render () {
this.props.fullscreen
···
}
```
{: data-line="2"}
Use `this.props` to access properties passed to the component.
See: [Properties](https://facebook.github.io/react/docs/tutorial.html#using-props)
### States
```jsx
this.setState({ username: 'rstacruz' })
```
```jsx
render () {
this.state.username
···
}
```
```jsx
const el = document.body
ReactDOM.render(<MyComponent name='John' />, el)
```
Use states (`this.state`) to manage dynamic data.
See: [States](https://facebook.github.io/react/docs/tutorial.html#reactive-state)
### Functional components
### Function components
```jsx
function MyComponent ({ name }) {
@ -73,6 +79,7 @@ function MyComponent ({ name }) {
```
Functional components have no state. Also, their `props` are passed as the first parameter to a function.
See: [Function and Class Components](https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components)
### Nesting
@ -88,43 +95,11 @@ class Info extends React.Component {
}
}
```
{: data-line="6-7"}
Nest components to separate concerns. See: [multiple components](http://facebook.github.io/react/docs/multiple-components.html)
Nest components to separate concerns. See: [Composing Components](https://facebook.github.io/react/docs/components-and-props.html#composing-components)
### Properties
```html
<Video fullscreen={true} />
```
```jsx
class Video extends React.Component {
render () {
this.props.fullscreen
/* ... */
}
}
```
Use [props](https://facebook.github.io/react/docs/tutorial.html#using-props) (`this.props`) to access parameters passed from the parent.
### States
```jsx
this.setState({ username: 'rstacruz' })
```
```jsx
render () {
this.state.username
/* ... */
}
```
Use states (`this.state`) to manage dynamic data.
See: [States](https://facebook.github.io/react/docs/tutorial.html#reactive-state)
### Setting default props
```jsx
@ -145,6 +120,30 @@ class Hello extends React.Component {
}
}
```
{: data-line="4"}
Set the default state in the `constructor()`.
### Children
```jsx
class AlertBox extends React.Component {
render () {
return <div className='alert-box'>
{this.props.children}
</div>
}
}
```
{: data-line="4"}
```jsx
<AlertBox>
<h1>You have pending notifications</h1>
</AlertBox>
```
Children are passed as the `children` property.
### Component API
@ -208,6 +207,7 @@ class MyComponent extends React.Component {
}
}
```
{: data-line="4"}
```jsx
this.input.focus()
@ -223,6 +223,7 @@ Allows access to DOM nodes. See: [Refs and the DOM](https://facebook.github.io/r
value={this.state.value}
onChange={this.handleChange} />
```
{: data-line="3"}
```jsx
handleChange: function(event) {
@ -361,6 +362,7 @@ class VideoPlayer extends React.Component {
}
}
```
{: data-line="3"}
Propagates `src="..."` down to the sub-component.
See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html).
@ -435,6 +437,41 @@ Always supply a `key` property.
</div>
```
Examples
-------
{: .-left-reference}
### Basic example
```jsx
import React from 'react'
import ReactDOM from 'react-dom'
```
```jsx
class Hello extends React.Component {
render () {
return <div className='message-box'>
Hello {this.props.name}
</div>
}
}
```
```jsx
const el = document.body
ReactDOM.render(<Hello name='John' />, el)
```
Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output)).
### Try it
<iframe src="http://jsbin.com/yafixat/edit?js,output" height="400"></iframe>
[Open in jsbin](http://jsbin.com/yafixat/edit?js,output)
{: target="_blank"}
Also see
--------
{: .-one-column}