@@ -12,41 +12,40 @@ Typed.js is a library that types. Enter in any string, and watch it type at the
1212
1313---
1414
15- Installation
16- ------------
15+ ## Installation
1716
1817#### Choose One
1918
20- ~~~
19+ ```
2120npm install typed.js
2221yarn add typed.js
2322bower install typed.js
24- ~~~
23+ ```
2524
2625#### CDN
2726
28- ~~~ html
29- <
script src =
" https://cdn.jsdelivr.net/npm/[email protected] .9 " ></
script >
30- ~~~
27+ ``` html
28+ <
script src =
" https://cdn.jsdelivr.net/npm/[email protected] .11 " ></
script >
29+ ```
3130
3231#### Setup
3332
3433This is really all you need to get going.
3534
36- ~~~ javascript
35+ ``` javascript
3736// Can also be included with a regular script tag
3837import Typed from ' typed.js' ;
3938
4039var options = {
41- strings: [" <i>First</i> sentence." , " & a second sentence." ],
40+ strings: [' <i>First</i> sentence.' , ' & a second sentence.' ],
4241 typeSpeed: 40
43- }
42+ };
4443
45- var typed = new Typed (" .element" , options);
46- ~~~
44+ var typed = new Typed (' .element' , options);
45+ ```
46+
47+ ## Wonderful sites that have used (or are using) Typed.js
4748
48- Wonderful sites that have used (or are using) Typed.js
49- ---
5049https://github.com/features/package-registry
5150
5251https://slack.com/
@@ -76,68 +75,70 @@ https://www.powerauth.com/
7675---
7776
7877### Strings from static HTML (SEO Friendly)
78+
7979Rather than using the ` strings ` array to insert strings, you can place an HTML ` div ` on the page and read from it.
8080This allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.
8181
82- ~~~ javascript
82+ ``` javascript
8383< script>
8484 var typed = new Typed (' #typed' , {
8585 stringsElement: ' #typed-strings'
8686 });
8787< / script>
88- ~~~
88+ ```
8989
90- ~~~ html
90+ ``` html
9191<div id =" typed-strings" >
92- <p >Typed.js is a <strong >JavaScript</strong > library.</p >
93- <p >It <em >types</em > out sentences.</p >
92+ <p >Typed.js is a <strong >JavaScript</strong > library.</p >
93+ <p >It <em >types</em > out sentences.</p >
9494</div >
9595<span id =" typed" ></span >
96- ~~~
96+ ```
9797
9898### Type Pausing
9999
100100You can pause in the middle of a string for a given amount of time by including an escape character.
101101
102- ~~~ javascript
103- var typed = new Typed (" .element" , {
102+ ``` javascript
103+ var typed = new Typed (' .element' , {
104104 // Waits 1000ms after typing "First"
105- strings: [" First ^1000 sentence." , " Second sentence." ]
105+ strings: [' First ^1000 sentence.' , ' Second sentence.' ]
106106});
107- ~~~
107+ ```
108108
109109### Smart Backspacing
110110
111111In the following example, this would only backspace the words after "This is a"
112112
113- ~~~ javascript
114- var typed = new Typed (" .element" , {
115- strings: [" This is a JavaScript library" , " This is an ES6 module" ],
113+ ``` javascript
114+ var typed = new Typed (' .element' , {
115+ strings: [' This is a JavaScript library' , ' This is an ES6 module' ],
116116 smartBackspace: true // Default value
117117});
118- ~~~
118+ ```
119119
120120### Bulk Typing
121121
122- The following example would emulate how a terminal acts when typing a command and seeing its result.
122+ The following example would emulate how a terminal acts when typing a command and seeing its result.
123123
124- ~~~ javascript
125- var typed = new Typed (" .element" , {
126- strings: [
127- " git push --force ^1000\n `pushed to origin with option force`"
128- ]
124+ ``` javascript
125+ var typed = new Typed (' .element' , {
126+ strings: [' git push --force ^1000\n `pushed to origin with option force`' ]
129127});
130- ~~~
128+ ```
131129
132130### CSS
133131
134132CSS animations are built upon initialzation in JavaScript. But, you can customize them at your will! These classes are:
133+
135134``` css
136135/* Cursor */
137- .typed-cursor {}
136+ .typed-cursor {
137+ }
138138
139139/* If fade out option is set */
140- .typed-fade-out {}
140+ .typed-fade-out {
141+ }
141142```
142143
143144### Use with ReactJS
@@ -152,16 +153,20 @@ Check out the Vue.js component: https://github.com/Orlandster/vue-typed-js
152153
153154Check out the WebComponent: https://github.com/Orlandster/wc-typed-js
154155
155- Customization
156- ----
156+ ## Customization
157157
158- ~~~ javascript
159- var typed = new Typed (" .element" , {
158+ ``` javascript
159+ var typed = new Typed (' .element' , {
160160 /**
161161 * @property {array} strings strings to be typed
162162 * @property {string} stringsElement ID of element containing string children
163163 */
164- strings: [' These are the default values...' , ' You know what you should do?' , ' Use your own!' , ' Have a great day!' ],
164+ strings: [
165+ ' These are the default values...' ,
166+ ' You know what you should do?' ,
167+ ' Use your own!' ,
168+ ' Have a great day!'
169+ ],
165170 stringsElement: null ,
166171
167172 /**
@@ -240,7 +245,7 @@ var typed = new Typed(".element", {
240245 * @param {Typed} self
241246 */
242247 onBegin : (self ) => {},
243-
248+
244249 /**
245250 * All typing is complete
246251 * @param {Typed} self
@@ -307,15 +312,13 @@ var typed = new Typed(".element", {
307312 */
308313 onDestroy : (self ) => {}
309314});
310- ~~~
311-
315+ ```
312316
313317## Contributing
314318
315319### [ View Contribution Guidelines] ( ./.github/CONTRIBUTING.md )
316320
317- end
318- ---
321+ ## end
319322
320323Thanks for checking this out. If you have any questions, I'll be on [ Twitter] ( http://www.twitter.com/atmattb ) .
321324
0 commit comments