Search icon
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Real-World Svelte

You're reading from  Real-World Svelte

Product type Book
Published in Dec 2023
Publisher Packt
ISBN-13 9781804616031
Pages 282 pages
Edition 1st Edition
Languages
Author (1):
Tan Li Hau Tan Li Hau
Profile icon Tan Li Hau

Table of Contents (22) Chapters

Preface 1. Part 1: Writing Svelte Components
2. Chapter 1: Lifecycles in Svelte 3. Chapter 2: Implementing Styling and Theming 4. Chapter 3: Managing Props and State 5. Chapter 4: Composing Components 6. Part 2: Actions
7. Chapter 5: Custom Events with Actions 8. Chapter 6: Integrating Libraries with Actions 9. Chapter 7: Progressive Enhancement with Actions 10. Part 3: Context and Stores
11. Chapter 8: Context versus Stores 12. Chapter 9: Implementing Custom Stores 13. Chapter 10: State Management with Svelte Stores 14. Chapter 11: Renderless Components 15. Chapter 12: Stores and Animations 16. Part 4: Transitions
17. Chapter 13: Using Transitions 18. Chapter 14: Exploring Custom Transitions 19. Chapter 15: Accessibility with Transitions 20. Index 21. Other Books You May Enjoy

Example – integrating CodeMirror

CodeMirror is a code editor component that has many great features for editing, such as syntax highlighting, code folding, and more.

You can find the CodeMirror documentation at https://codemirror.net/.

At the time of writing, CodeMirror is currently at version 5.65.9.

After installing the codemirror library using the package manager of our choice, we can import codemirror into our code:

import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';

Now, we can initialize CodeMirror with the following constructor function:

const myCodeMirror = CodeMirror(document.body);

Here, we pass in the element where we want the CodeMirror code editor to be.

Before I continue, at this point, note that we are looking for the same set of things from CodeMirror:

  • Methods to initialize CodeMirror
  • Any method needed to clean up a CodeMirror instance
  • Any method to update a CodeMirror instance...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime}