Ï㽶ÊÓƵ

Cracking the code with the improved source editor

Work your HTML like a pro
Image by Adi GoldsteinÌýonÌýUnsplash.

Combing through code can be overwhelming when you're faced with a wall of indecipherable text and tags. The good news is that it's now easier than ever to work with the source editor in the WMS. Thanks to the latest update, the source view offers a richÌýexperience withÌýindustry-standard features typically seen inÌýtext editors used for coding.

Syntax highlighting

Tags and the different elements inside themÌýare colour-coded, makingÌýattributes and values stand out.

Self-closing tags

Type an opening tag and the editor immediately adds the closing tag for you — a godsend if you'reÌýforgetful!

Collapsible code blocks

ClickÌýthe line number and hideÌýyour clutter — sift through complex levels of nested tagsÌýby collapsing portions of the code.Ìý

Pro tip: Use the keyboard shortcut 'Ctrl-Q' (in both Windows or Mac) to collapse or expand code blocks

animated gif of source code blocks collapsing and expanding

Code is everywhere

You can find the source editorÌýwithin most content types in the WMS such as:

  • Basic Pages
  • Articles
  • Body fieldÌýin most blocks
  • Content area of Channels news and events
  • Text areas of certain McGill ProfileÌýfields

Why do it in the code

°Õ°ù´Ç³Ü²ú±ô±ð²õ³ó´Ç´Ç³Ù¾±²Ô²µÌý

One of theÌýbest reasons to dig into the HTML is to figure out why something'sÌýbroken on your page. Incorrectly nested tags or tags left open-ended aren'tÌýalwaysÌýobvious to the naked eye. This is especially the case when dealing with content made up of one or more templates. Syntax highlighting and collapsible code helps you find the problem more easily.

TemplatingÌýand nesting

Working with templates is so much clearer when you can isolate sections in the code and this is also true of any type of nesting:

Injecting style

And of course,Ìýto add some inline styling, you'll need to dig into the source to add the secret sauce.Ìý

So go ahead and dive in —Ìýit's easier than ever to crack the code.

Ìý

Back to top