Skip to content

Readme syntax highlighting [ci-skip] #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
megawac wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Readme syntax highlighting [ci-skip] #36

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 25 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,23 @@ file a bug.

## Usage

// create the morph object
var morph = Metamorph("HI!");
```javascript
// create the morph object
var morph = Metamorph("HI!");

// insert it into the DOM
$("#foo").html(morph.outerHTML());
// insert it into the DOM
$("#foo").html(morph.outerHTML());

// replace the contents
morph.html("BYE!");
// replace the contents
morph.html("BYE!");

// remove the morph
morph.remove();
// remove the morph
morph.remove();

// append the morph to an existing element, useful when
// manually creating morphs and not using a templating library
morph.appendTo(document.getElementById('foo'));
// append the morph to an existing element, useful when
// manually creating morphs and not using a templating library
morph.appendTo(document.getElementById('foo'));
```

## Notes

Expand All @@ -56,16 +58,18 @@ insert an `<li>` into a `<ul>`, but not a `<p>`.

This holds for the initial insertion as well as any updates.

var ul = $("<ul>").appendTo("body").end();
```javascript
var ul = $("<ul>").appendTo("body").end();

var morph = Metamorph("<li>HI!</li>");
ul.append(morph.outerHTML()); // legal
var morph = Metamorph("<li>HI!</li>");
ul.append(morph.outerHTML()); // legal

var otherMorph = Metamorph("<p>HI!</p>");
ul.append(otherMorph.outerHTML()); // illegal
var otherMorph = Metamorph("<p>HI!</p>");
ul.append(otherMorph.outerHTML()); // illegal

morph.html("<li>BYE!</li>") // legal
morph.html("<p>BYE!</p>") // illegal
morph.html("<li>BYE!</li>") // legal
morph.html("<p>BYE!</p>") // illegal
```

## Implementation

Expand Down Expand Up @@ -104,7 +108,9 @@ the main initial API is `outerHTML`.
If you like, you can disable the range API by using an environment
variable:

MetamorphENV = { DISABLE_RANGE_API: true }
```javascript
MetamorphENV = { DISABLE_RANGE_API: true }
```

The current implementation of the range API in many browsers is slower
than the alternative implementation inside Metamorph.js. It is a good
Expand Down