CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Community Wishlist Survey 2016/CodeMirror - Meta</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )metawikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat": "dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"ebc6fedb-06ae-4866-93d6-3c1da0b68695","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Community_Wishlist_Survey_2016/CodeMirror","wgTitle":"Community Wishlist Survey 2016/CodeMirror","wgCurRevisionId":27777905,"wgRevisionId":27777905,"wgArticleId":10152912,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Community Tech - Community wishlist projects","Community Tech"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Community_Wishlist_Survey_2016/CodeMirror","wgRelevantArticleId":10152912,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"meta","wgCiteReferencePreviewsActive":false, "wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":50000,"wgTranslatePageTranslation":"source","wgEditSubmitButtonLabelPublish":true,"wgDiscussionToolsFeaturesEnabled":{"replytool":true,"newtopictool":true,"sourcemodetoolbar":true,"topicsubscription":false,"autotopicsub":false,"visualenhancements":false,"visualenhancements_reply":false,"visualenhancements_pageframe":false},"wgDiscussionToolsFallbackEditMode":"source","wgULSPosition":"personal","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"]};RLSTATE={ "ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.translate.tag.languages":"ready","ext.pygments":"ready","ext.discussionTools.init.styles":"ready","oojs-ui-core.styles":"ready","oojs-ui.styles.indicators":"ready","mediawiki.widgets.styles":"ready","oojs-ui-core.icons":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.translate.edit.documentation.styles":"ready","ext.translate":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.pygments.view","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.translate.pagetranslation.uls","ext.gadget.AddTopic","ext.gadget.formWizard", "ext.gadget.ReferenceTooltips","ext.gadget.WishlistTranslation","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.discussionTools.init","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.checkUser.clientHints"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.discussionTools.init.styles%7Cext.pygments%2Ctranslate%2CwikimediaBadges%7Cext.translate.edit.documentation.styles%7Cext.translate.tag.languages%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.8"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/1/19/Pride_and_codemirror.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="817"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Pride_and_codemirror.png/800px-Pride_and_codemirror.png"> <meta property="og:image:width" content="800"> <meta property="og:image:height" content="545"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Pride_and_codemirror.png/640px-Pride_and_codemirror.png"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="436"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Community Wishlist Survey 2016/CodeMirror - Meta"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//meta.m.wikimedia.org/wiki/Community_Wishlist_Survey_2016/CodeMirror"> <link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit"> <link rel="icon" href="/static/favicon/community.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Meta (en)"> <link rel="EditURI" type="application/rsd+xml" href="//meta.wikimedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://meta.wikimedia.org/wiki/Community_Wishlist_Survey_2016/CodeMirror"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> <link rel="alternate" type="application/atom+xml" title="Meta Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="login.wikimedia.org"> </head> <body class="ext-discussiontools-replytool-enabled ext-discussiontools-newtopictool-enabled ext-discussiontools-sourcemodetoolbar-enabled skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-Community_Wishlist_Survey_2016_CodeMirror rootpage-Community_Wishlist_Survey_2016 skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-wikimedia-news-label" class="mw-list-item"><a href="/wiki/Wikimedia_News"><span>Wikimedia News</span></a></li><li id="n-translations-text" class="mw-list-item"><a href="/wiki/Special:LanguageStats"><span>Translations</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Load a random page [x]" accesskey="x"><span>Random page</span></a></li><li id="n-help" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Help:Help" title="The place to find out"><span>Help</span></a></li><li id="n-Babel-text" class="mw-list-item"><a href="/wiki/Meta:Babel"><span>Babel</span></a></li> </ul> </div> </div> <div id="p-community" class="vector-menu mw-portlet mw-portlet-community" > <div class="vector-menu-heading"> Community </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-WikimediaResourceCenter-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Wikimedia_Resource_Center"><span>Wikimedia Resource Center</span></a></li><li id="n-WikimediaForum-text" class="mw-list-item"><a href="/wiki/Wikimedia_Forum"><span>Wikimedia Forum</span></a></li><li id="n-mailinglists-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Mailing_lists/Overview"><span>Mailing lists</span></a></li><li id="n-Requests-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Meta:Requests_and_proposals"><span>Requests</span></a></li><li id="n-Babylon-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Meta:Babylon"><span>Babylon</span></a></li><li id="n-Reports-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Wikimedia_Affiliates_Data_Portal"><span>Reports</span></a></li><li id="n-Research-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Research:Index"><span>Research</span></a></li><li id="n-planet" class="mw-list-item"><a href="//en.planet.wikimedia.org/" title="Weblog aggregator of Wikimedia-related posts"><span>Planet Wikimedia</span></a></li> </ul> </div> </div> <div id="p-beyond_the_web" class="vector-menu mw-portlet mw-portlet-beyond_the_web" > <div class="vector-menu-heading"> Beyond the Web </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-Meetup-text" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Meetup"><span>Meet Wikimedians</span></a></li><li id="n-Events-text" class="mw-list-item"><a href="/wiki/Events"><span>Events</span></a></li><li id="n-wikimedia-movement-affiliates-shortlabel" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Wikimedia_movement_affiliates"><span>Movement affiliates</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Special:MyLanguage/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/metawiki.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikimedia Meta-Wiki" src="/static/images/mobile/copyright/metawiki-wordmark.svg" style="width: 7.5em; height: 1.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Meta [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Meta" aria-label="Search Meta" autocapitalize="sentences" title="Search Meta [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-uls" class="mw-list-item active user-links-collapsible-item"><a data-mw="interface" href="#" class="uls-trigger cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet"><span class="vector-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>English</span></a> </li> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=meta.wikimedia.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Community+Wishlist+Survey+2016%2FCodeMirror" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Community+Wishlist+Survey+2016%2FCodeMirror" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out user-links-collapsible-item" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=meta.wikimedia.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Community+Wishlist+Survey+2016%2FCodeMirror" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Community+Wishlist+Survey+2016%2FCodeMirror" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Rationale" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Rationale"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Rationale</span> </div> </a> <ul id="toc-Rationale-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Status_Updates" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Status_Updates"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Status Updates</span> </div> </a> <button aria-controls="toc-Status_Updates-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Status Updates subsection</span> </button> <ul id="toc-Status_Updates-sublist" class="vector-toc-list"> <li id="toc-March_26,_2024" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#March_26,_2024"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>March 26, 2024</span> </div> </a> <ul id="toc-March_26,_2024-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-September_13,_2023" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#September_13,_2023"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.2</span> <span>September 13, 2023</span> </div> </a> <ul id="toc-September_13,_2023-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-March_9,_2022" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#March_9,_2022"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.3</span> <span>March 9, 2022</span> </div> </a> <ul id="toc-March_9,_2022-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-June_14,_2018" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#June_14,_2018"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.4</span> <span>June 14, 2018</span> </div> </a> <ul id="toc-June_14,_2018-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-May_30,_2018" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#May_30,_2018"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.5</span> <span>May 30, 2018</span> </div> </a> <ul id="toc-May_30,_2018-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-April_30,_2018" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#April_30,_2018"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.6</span> <span>April 30, 2018</span> </div> </a> <ul id="toc-April_30,_2018-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-April_26,_2018" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#April_26,_2018"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.7</span> <span>April 26, 2018</span> </div> </a> <ul id="toc-April_26,_2018-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-March_7,_2018" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#March_7,_2018"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.8</span> <span>March 7, 2018</span> </div> </a> <ul id="toc-March_7,_2018-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-September_19,_2017" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#September_19,_2017"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.9</span> <span>September 19, 2017</span> </div> </a> <ul id="toc-September_19,_2017-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-September_7,_2017" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#September_7,_2017"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.10</span> <span>September 7, 2017</span> </div> </a> <ul id="toc-September_7,_2017-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-August_23,_2017" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#August_23,_2017"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.11</span> <span>August 23, 2017</span> </div> </a> <ul id="toc-August_23,_2017-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-August_2,_2017" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#August_2,_2017"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.12</span> <span>August 2, 2017</span> </div> </a> <ul id="toc-August_2,_2017-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-July_18,_2017" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#July_18,_2017"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.13</span> <span>July 18, 2017</span> </div> </a> <ul id="toc-July_18,_2017-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-March_22,_2017" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#March_22,_2017"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.14</span> <span>March 22, 2017</span> </div> </a> <ul id="toc-March_22,_2017-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-March_21,_2017" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#March_21,_2017"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.15</span> <span>March 21, 2017</span> </div> </a> <ul id="toc-March_21,_2017-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-February_27,_2017" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#February_27,_2017"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.16</span> <span>February 27, 2017</span> </div> </a> <ul id="toc-February_27,_2017-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Important_links" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Important_links"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Important links</span> </div> </a> <ul id="toc-Important_links-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Color_and_style_customization" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Color_and_style_customization"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Color and style customization</span> </div> </a> <button aria-controls="toc-Color_and_style_customization-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Color and style customization subsection</span> </button> <ul id="toc-Color_and_style_customization-sublist" class="vector-toc-list"> <li id="toc-How_to_do_it_for_those_who_have_very_little_understanding_of_css" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#How_to_do_it_for_those_who_have_very_little_understanding_of_css"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1</span> <span>How to do it for those who have very little understanding of css</span> </div> </a> <ul id="toc-How_to_do_it_for_those_who_have_very_little_understanding_of_css-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Community Wishlist Survey 2016/CodeMirror</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="This article exist only in this language. Add the article for other languages" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-0" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">Add languages</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-add wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:NewItem?site=metawiki&page=Community+Wishlist+Survey+2016%2FCodeMirror" title="Add interlanguage links" class="wbc-editpage">Add links</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror" title="View the content page [c]" accesskey="c"><span>Content page</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:Community_Wishlist_Survey_2016/CodeMirror" rel="discussion" title="Discussion about the content page [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Community_Wishlist_Survey_2016/CodeMirror" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Community_Wishlist_Survey_2016/CodeMirror" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&oldid=27777905" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Community_Wishlist_Survey_2016%2FCodeMirror&id=27777905&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlQ%C4%B1sald%C4%B1c%C4%B1s%C4%B1&url=https%3A%2F%2Fmeta.wikimedia.org%2Fwiki%2FCommunity_Wishlist_Survey_2016%2FCodeMirror"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrKodu&url=https%3A%2F%2Fmeta.wikimedia.org%2Fwiki%2FCommunity_Wishlist_Survey_2016%2FCodeMirror"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=Community+Wishlist+Survey+2016%2FCodeMirror"><span>Create a book</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Community_Wishlist_Survey_2016%2FCodeMirror&action=show-download-screen"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects emptyPortlet" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> <div id="mw-indicator-phabricator-project" class="mw-indicator"><div class="mw-parser-output"><span class="notheme" lang="en" dir="ltr" style="font-size:87%;line-height:normal;margin:1px .2em;background:#CFC;color:#202122;border:1px solid var(--border-color-subtle, #c8ccd1);border-radius:.3em;padding:1px .2em;font-weight:bold;font-style:normal;text-decoration:none"><a href="/wiki/Special:MyLanguage/Phabricator" title="Special:MyLanguage/Phabricator">Phabricator</a> project: <bdi lang="en" dir="ltr"><a href="https://phabricator.wikimedia.org/tag/MediaWiki-extensions-CodeMirror/" class="extiw" title="phab:tag/MediaWiki-extensions-CodeMirror/"><b>#MediaWiki-extensions-CodeMirror</b></a></bdi></span></div></div> </div> <div id="siteSub" class="noprint">From Meta, a Wikimedia project coordination wiki</div> </div> <div id="contentSub"><div id="mw-content-subtitle"><div class="subpages">< <bdi dir="ltr"><a href="/wiki/Special:MyLanguage/Community_Wishlist_Survey_2016" title="Special:MyLanguage/Community Wishlist Survey 2016">Community Wishlist Survey 2016</a></bdi></div></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-pt-translate-header noprint nomobile" dir="ltr" lang="en"><a href="/w/index.php?title=Special:Translate&group=page-Community+Wishlist+Survey+2016%2FCodeMirror&action=page&filter=&action_source=translate_page" title="Special:Translate">Translate this page</a></div><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="mw-pt-languages noprint navigation-not-searchable" lang="en" dir="ltr"><div class="mw-pt-languages-label">Other languages:</div><ul class="mw-pt-languages-list"><li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/id" class="mw-pt-progress mw-pt-progress--low" title="Community Tech/Wikitext editor syntax highlighting/id (0% translated)" lang="id" dir="ltr">Bahasa Indonesia</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/de" class="mw-pt-progress mw-pt-progress--complete" title="Community-Wunschliste Umfrage 2016/CodeMirror (100% translated)" lang="de" dir="ltr">Deutsch</a></li> <li><span class="mw-pt-languages-ui mw-pt-languages-selected mw-pt-progress mw-pt-progress--complete" lang="en" dir="ltr">English</span></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/eo" class="mw-pt-progress mw-pt-progress--low" title="Community Tech/Wikitext editor syntax highlighting/eo (0% translated)" lang="eo" dir="ltr">Esperanto</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/ha" class="mw-pt-progress mw-pt-progress--low" title="Community Wishlist Survey 2016/CodeMirror/ha (12% translated)" lang="ha" dir="ltr">Hausa</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/nl" class="mw-pt-progress mw-pt-progress--complete" title="Community Wishlist Survey 2016/CodeMirror/nl (100% translated)" lang="nl" dir="ltr">Nederlands</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/tl" class="mw-pt-progress mw-pt-progress--low" title="Community Tech/Wikitext editor syntax highlighting/tl (0% translated)" lang="tl" dir="ltr">Tagalog</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/vi" class="mw-pt-progress mw-pt-progress--low" title="Community Tech/Wikitext editor syntax highlighting/vi (3% translated)" lang="vi" dir="ltr">Tiếng Việt</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/tr" class="mw-pt-progress mw-pt-progress--low" title="Community Wishlist Survey 2016/CodeMirror/tr (3% translated)" lang="tr" dir="ltr">Türkçe</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/da" class="mw-pt-progress mw-pt-progress--low" title="Community Wishlist Survey 2016/CodeMirror/da (3% translated)" lang="da" dir="ltr">dansk</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/es" class="mw-pt-progress mw-pt-progress--med" title="Tecnología comunitaria/Resaltado sintáctico de wikitexto (66% translated)" lang="es" dir="ltr">español</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/fr" class="mw-pt-progress mw-pt-progress--low" title="Community Tech/Wikitext editor syntax highlighting/fr (12% translated)" lang="fr" dir="ltr">français</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/it" class="mw-pt-progress mw-pt-progress--low" title="Community Tech/Wikitext editor syntax highlighting/it (0% translated)" lang="it" dir="ltr">italiano</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/hu" class="mw-pt-progress mw-pt-progress--low" title="Community Wishlist Survey 2016/CodeMirror/hu (3% translated)" lang="hu" dir="ltr">magyar</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/pt" class="mw-pt-progress mw-pt-progress--low" title="Community Tech/Wikitext editor syntax highlighting/pt (0% translated)" lang="pt" dir="ltr">português</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/fi" class="mw-pt-progress mw-pt-progress--low" title="Community Wishlist Survey 2016/CodeMirror/fi (0% translated)" lang="fi" dir="ltr">suomi</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/ru" class="mw-pt-progress mw-pt-progress--low" title="Community Tech/Wikitext editor syntax highlighting/ru (0% translated)" lang="ru" dir="ltr">русский</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/uk" class="mw-pt-progress mw-pt-progress--med" title="Community Tech/Підсвічування синтаксису редактора вікітексту (59% translated)" lang="uk" dir="ltr">українська</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/ar" class="mw-pt-progress mw-pt-progress--low" title="Community Wishlist Survey 2016/CodeMirror/ar (9% translated)" lang="ar" dir="rtl">العربية</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/th" class="mw-pt-progress mw-pt-progress--med" title="เทคโนโลยีเพื่อสังคม/การเน้นไวยากรณ์ของโปรแกรมแก้ไข Wikitext (19% translated)" lang="th" dir="ltr">ไทย</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/zh" class="mw-pt-progress mw-pt-progress--complete" title="2016年社区心愿单调查/CodeMirror (100% translated)" lang="zh" dir="ltr">中文</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/ja" class="mw-pt-progress mw-pt-progress--med" title="Community Tech/Wikitext editor syntax highlighting/ja (66% translated)" lang="ja" dir="ltr">日本語</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/nan" class="mw-pt-progress mw-pt-progress--low" title="Siā-khu Kì-sut/Uikitext pian-tsip-khí kù-huat tu̍t-tshut hián-sī (6% translated)" lang="nan" dir="ltr">閩南語 / Bân-lâm-gú</a></li> <li><a href="/wiki/Community_Wishlist_Survey_2016/CodeMirror/ko" class="mw-pt-progress mw-pt-progress--complete" title="커뮤니티 위시리스트 설문조사 2016/CodeMirror (100% translated)" lang="ko" dir="ltr">한국어</a></li></ul></div> <style data-mw-deduplicate="TemplateStyles:r24709487">.mw-parser-output .infobox{border:1px solid #a2a9b1;border-spacing:3px;background-color:#f8f9fa;color:black;padding:0.2em;font-size:88%;line-height:1.5em;box-sizing:border-box}.mw-parser-output .infobox-header,.mw-parser-output .infobox-label,.mw-parser-output .infobox-above,.mw-parser-output .infobox-full-data,.mw-parser-output .infobox-data,.mw-parser-output .infobox-below,.mw-parser-output .infobox-subheader,.mw-parser-output .infobox-image,.mw-parser-output .infobox-navbar{vertical-align:top}.mw-parser-output .infobox-label,.mw-parser-output .infobox-data{text-align:left}.mw-parser-output .infobox-above,.mw-parser-output .infobox-title{font-size:125%;font-weight:bold;text-align:center}.mw-parser-output .infobox-title{padding:0.2em}.mw-parser-output .infobox-header,.mw-parser-output .infobox-subheader,.mw-parser-output .infobox-image,.mw-parser-output .infobox-full-data,.mw-parser-output .infobox-below{text-align:center}.mw-parser-output .infobox-navbar{text-align:right}.mw-parser-output .infobox .navbar{font-size:100%}@media(min-width:720px){.mw-parser-output .infobox{margin:0.5em 0 0.5em 1em;float:right;clear:right;width:22em}}.mw-parser-output .infobox-subbox{padding:0;border:none;margin:-3px;width:auto;clear:none;float:none;min-width:100%;font-size:100%;background-color:transparent}</style><style data-mw-deduplicate="TemplateStyles:r24700402">.mw-parser-output .ib-wmf-engineering-project .infobox-above{background:#14866d;color:#f8f9fa;padding-top:0.5em;padding-bottom:0.5em}.mw-parser-output .ib-wmf-engineering-project-description{text-align:left;font-style:italic}.mw-parser-output .ib-wmf-engineering-project .infobox-label{font-weight:normal}.mw-parser-output .ib-wmf-engineering-project-prev{float:left}.mw-parser-output .ib-wmf-engineering-project-next{float:right}@media all and (min-width:720px){.mw-parser-output .ib-wmf-engineering-project .infobox-label{width:25%}}</style><table class="infobox ib-wmf-engineering-project plainlinks"><tbody><tr><th colspan="2" class="infobox-above">CodeMirror <bdi lang="en" dir="ltr" class="plainlinks" style="font-size:smaller;"><a class="external text" href="https://meta.wikimedia.org/w/index.php?title=Special:Translate/page-Template:Wikimedia_engineering_project_information&language=en&action=page"><span style="margin:1px;padding:0 1px"><span class="mw-default-size mw-valign-middle" typeof="mw:File"><span title="Translate"><img alt="Translate" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/62/Globe_of_letters.png/16px-Globe_of_letters.png" decoding="async" width="16" height="13" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/62/Globe_of_letters.png/25px-Globe_of_letters.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/62/Globe_of_letters.png/32px-Globe_of_letters.png 2x" data-file-width="144" data-file-height="116"/></span></span></span></a></bdi></th></tr><tr><td colspan="2" class="infobox-full-data ib-wmf-engineering-project-description">Syntax highlighting for wikitext editor</td></tr><tr><th scope="row" class="infobox-label">Group:</th><td class="infobox-data"><a href="/wiki/Community_Tech" title="Community Tech">Community Tech</a></td></tr><tr><th scope="row" class="infobox-label">Team members:</th><td class="infobox-data"><a href="/wiki/User:JSengupta-WMF" title="User:JSengupta-WMF">Joydeep Sengupta</a>, <a href="/wiki/User:DMaza_(WMF)" title="User:DMaza (WMF)">Dayllan Maza</a>, <a href="/wiki/User:HMonroy_(WMF)" title="User:HMonroy (WMF)">Harumi Monroy</a>, <a href="/wiki/User:MusikAnimal_(WMF)" title="User:MusikAnimal (WMF)">MusikAnimal</a>, <a href="/wiki/User:SWilson_(WMF)" title="User:SWilson (WMF)">Sam Wilson</a>, <a href="/wiki/User:KSiebert_(WMF)" title="User:KSiebert (WMF)">Karolin Siebert</a>, <a href="/wiki/User:STei_(WMF)" title="User:STei (WMF)">Sandister Tei</a>, <a href="/wiki/User:TheresNoTime-WMF" title="User:TheresNoTime-WMF">Sammy Tarling</a></td></tr><tr><th scope="row" class="infobox-label">Lead:</th><td class="infobox-data"><a href="/wiki/User:MusikAnimal_(WMF)" title="User:MusikAnimal (WMF)">MusikAnimal</a></td></tr><tr><th scope="row" class="infobox-label">Updates:</th><td class="infobox-data"><a href="#Status_Updates">Updates</a></td></tr></tbody></table> <div class="tracked tracked-floatright mw-trackedTemplate"> <style data-mw-deduplicate="TemplateStyles:r27690877">.mw-parser-output .tracked{font-size:85%;margin:2px;background-color:var(--background-color-neutral,#eaecf0);color:var(--color-base,#202122);border:1px solid var(--border-color-base,#a2a9b1);border-radius:.5em;padding:2px .3em;width:12em;text-align:center}.mw-parser-output .tracked-floatright{float:right;clear:right;margin:2px 0 2px 2px}.mw-parser-output .tracked-floatleft{float:left;clear:left;margin:2px 2px 2px 0}</style> Tracked in <a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Phabricator" class="extiw" title="mw:Special:MyLanguage/Phabricator">Phabricator</a>: <br/> <a href="https://phabricator.wikimedia.org/T259059" class="extiw" title="phabricator:T259059"><strong class="trakfab-T259059">Task T259059</strong></a></div> <div class="tracked tracked-floatright mw-trackedTemplate"> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r27690877"> Tracked in <a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Phabricator" class="extiw" title="mw:Special:MyLanguage/Phabricator">Phabricator</a>: <br/> <a href="https://phabricator.wikimedia.org/T101246" class="extiw" title="phabricator:T101246"><strong class="trakfab-T101246">Task T101246</strong></a> <strong style="color:#080;font-variant:small-caps">resolved</strong></div> <p>The <b>CodeMirror</b> project (also known as <b>wikitext editor syntax highlighting</b>) aims to make it easier for contributors to edit wikitext by using colors and shade to make it easier to visually separate article text from the code for links, references and templates. This will help editors working on paragraphs with many references, or complicated templates where it's easy to miss a curly brace and mess up the template. We are using <a href="https://www.mediawiki.org/wiki/Extension:CodeMirror" class="extiw" title="mw:Extension:CodeMirror">Extension:CodeMirror</a> for this. </p><p><span typeof="mw:File"><a href="/wiki/File:Pride_and_codemirror.png" class="mw-file-description" title="Screenshot of Syntax Highlighting in English."><img alt="Screenshot of Syntax Highlighting in English." src="//upload.wikimedia.org/wikipedia/commons/thumb/1/19/Pride_and_codemirror.png/240px-Pride_and_codemirror.png" decoding="async" width="240" height="163" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/1/19/Pride_and_codemirror.png/360px-Pride_and_codemirror.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/1/19/Pride_and_codemirror.png/480px-Pride_and_codemirror.png 2x" data-file-width="1068" data-file-height="727"/></a></span> <span typeof="mw:File"><a href="/wiki/File:Codemirror_hindi.png" class="mw-file-description" title="Screenshot of Syntax Highlighting in Hindi."><img alt="Screenshot of Syntax Highlighting in Hindi." src="//upload.wikimedia.org/wikipedia/commons/thumb/8/80/Codemirror_hindi.png/240px-Codemirror_hindi.png" decoding="async" width="240" height="133" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/80/Codemirror_hindi.png/360px-Codemirror_hindi.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/80/Codemirror_hindi.png/480px-Codemirror_hindi.png 2x" data-file-width="1043" data-file-height="580"/></a></span> <span typeof="mw:File"><a href="/wiki/File:Codemirror_popup.png" class="mw-file-description" title="Screenshot of Syntax Highlighting with the popup for first-time users."><img alt="Screenshot of Syntax Highlighting with the popup for first-time users." src="//upload.wikimedia.org/wikipedia/commons/thumb/2/20/Codemirror_popup.png/240px-Codemirror_popup.png" decoding="async" width="240" height="122" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/20/Codemirror_popup.png/360px-Codemirror_popup.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/2/20/Codemirror_popup.png/480px-Codemirror_popup.png 2x" data-file-width="1424" data-file-height="724"/></a></span> </p><p>The syntax highlighting is available in the classic wikitext editor as a button (<span typeof="mw:File"><a href="/wiki/File:Codemirror-icon.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Codemirror-icon.png/20px-Codemirror-icon.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Codemirror-icon.png/30px-Codemirror-icon.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Codemirror-icon.png/40px-Codemirror-icon.png 2x" data-file-width="410" data-file-height="410"/></a></span>) that appears in the toolbar. It is also available in the 2017 Wikitext editor as an option that appears in the "burger menu icon" dropdown menu. The user can switch the highlighting on and off using that button. This is done via a hidden preference, so if you turn it off then it will stay off, until you turn it on again. After activating for the very first time, highlighting is set to off, so you have to switch it on manually to make it work. </p><p>The feature was primarily built by volunteer developer <a href="/wiki/User:Pastakhov" title="User:Pastakhov">Pastakhov</a>; Community Tech helped him to finish the feature, and get it deployed. On the Community Tech side, <a href="/wiki/User:NKohli_(WMF)" title="User:NKohli (WMF)">Niharika</a> and <a href="/wiki/User:Ryan_Kaldari_(WMF)" title="User:Ryan Kaldari (WMF)">Ryan</a> did the bulk of the work, with help from the Editing team's <a href="/wiki/User:ESanders_(WMF)" title="User:ESanders (WMF)">Ed Sanders</a> on integration with Visual Editor's wikitext mode. </p><p>As of September 2023, Community Tech is working on upgrading to CodeMirror 6, which will bring great enhancements such as RTL support, improved performance, accessiblity, and mobile support. </p> <meta property="mw:PageProp/toc"/> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Rationale" data-mw-thread-id="h-Rationale"><span data-mw-comment-start="" id="h-Rationale"></span>Rationale<span data-mw-comment-end="h-Rationale"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=1" title="Edit section: Rationale"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>We have decided to use <a href="https://www.mediawiki.org/wiki/Extension:CodeMirror" class="extiw" title="mw:Extension:CodeMirror">Extension:CodeMirror</a> as the syntax highlighting tool. </p><p>Here are the advantages that CodeMirror offers: </p> <ul><li>Much faster performance, it's been heavily optimized</li> <li>Uses "wysiwyg"-style effects, to make it easier to see the impact of the wikitext elements -- for example, bold words are rendered in bold, italics in italics.</li> <li>Section headings are bigger, which helps the editor navigate on the screen.</li> <li>Links are underlined and blue, which makes them more recognizable as links. When there's displaytext that's different from the link, the link is in blue, and the displaytext after the pipe is black, to indicate that's the part that will be seen as text.</li> <li>Uses bold colored text for template parameters, light colored text for entries.</li> <li>Uses light background highlighting on links, and not on other elements. Too much background highlighting can make the wikitext harder to scan.</li> <li>Waits for the editor to finish typing before it changes highlighting colors, to allow the editor to finish typing the link or the bold/italics without making everything below that line flash as different colors.</li></ul> <p>The other tools we looked at before deciding on CodeMirror were <a href="https://en.wikipedia.org/wiki/en:User:Cacycle/wikEd" class="extiw" title="w:en:User:Cacycle/wikEd">wikEd</a> by Cacycle, and <a href="https://www.mediawiki.org/wiki/User:Remember_the_dot/Syntax_highlighter" class="extiw" title="mw:User:Remember the dot/Syntax highlighter">Syntax highlighter</a> by Remember the dot. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Status_Updates" data-mw-thread-id="h-Status_Updates"><span data-mw-comment-start="" id="h-Status_Updates"></span>Status Updates<span data-mw-comment-end="h-Status_Updates"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=2" title="Edit section: Status Updates"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="March_26,_2024" data-mw-thread-id="h-March_26,_2024-Status_Updates"><span id="March_26.2C_2024"></span><span data-mw-comment-start="" id="h-March_26,_2024-Status_Updates"></span>March 26, 2024<span data-mw-comment-end="h-March_26,_2024-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=3" title="Edit section: March 26, 2024"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>CodeMirror 6 is now <a href="https://phabricator.wikimedia.org/T357795" class="extiw" title="phab:T357795">deployed</a> to <a href="https://test.wikipedia.org/wiki/" class="extiw" title="testwiki:">Test Wikipedia</a>. We invite users to try it out and <a href="/wiki/Talk:Community_Wishlist_Survey_2016/CodeMirror" title="Talk:Community Wishlist Survey 2016/CodeMirror">provide feedback</a>. It will be slowly deployed to more wikis in the coming weeks. </p> <div class="mw-heading mw-heading3"><h3 id="September_13,_2023" data-mw-thread-id="h-September_13,_2023-Status_Updates"><span id="September_13.2C_2023"></span><span data-mw-comment-start="" id="h-September_13,_2023-Status_Updates"></span>September 13, 2023<span data-mw-comment-end="h-September_13,_2023-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=4" title="Edit section: September 13, 2023"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="tracked tracked-floatright mw-trackedTemplate"> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r27690877"> Tracked in <a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Phabricator" class="extiw" title="mw:Special:MyLanguage/Phabricator">Phabricator</a>: <br/> <a href="https://phabricator.wikimedia.org/T317243" class="extiw" title="phabricator:T317243"><strong class="trakfab-T317243">Task T317243</strong></a></div> <p>Community Tech is working on upgrading the extension to use the latest version of the CodeMirror library. This promises to bring many enhancements such as RTL support, improved performance, accessibility, and mobile support. </p> <div class="mw-heading mw-heading3"><h3 id="March_9,_2022" data-mw-thread-id="h-March_9,_2022-Status_Updates"><span id="March_9.2C_2022"></span><span data-mw-comment-start="" id="h-March_9,_2022-Status_Updates"></span>March 9, 2022<span data-mw-comment-end="h-March_9,_2022-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=5" title="Edit section: March 9, 2022"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Bracket matching and improved syntax highlighting colors will be implemented on all wikis (except English Wikipedia (March 16)). (<a href="/wiki/Special:MyLanguage/WMDE_Technical_Wishes/Improved_Color_Scheme_of_Syntax_Highlighting" title="Special:MyLanguage/WMDE Technical Wishes/Improved Color Scheme of Syntax Highlighting">more information</a>) </p> <div class="mw-heading mw-heading3"><h3 id="June_14,_2018" data-mw-thread-id="h-June_14,_2018-Status_Updates"><span id="June_14.2C_2018"></span><span data-mw-comment-start="" id="h-June_14,_2018-Status_Updates"></span>June 14, 2018<span data-mw-comment-end="h-June_14,_2018-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=6" title="Edit section: June 14, 2018"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Syntax highlighting has graduated from Beta Feature status and is now available for all users inside the 2010 Wikitext Editor on all left-to-right language wikis, in addition to all languages in the 2017 Wikitext Editor. The feature can be enabled during any edit by selecting the 🖋 Highlight icon in the toolbar. </p><p>We hope this feature makes it easier to edit in wikitext and debug malformed markup. We'd love to hear your feedback on the talkpage. </p> <div class="mw-heading mw-heading3"><h3 id="May_30,_2018" data-mw-thread-id="h-May_30,_2018-Status_Updates"><span id="May_30.2C_2018"></span><span data-mw-comment-start="" id="h-May_30,_2018-Status_Updates"></span>May 30, 2018<span data-mw-comment-end="h-May_30,_2018-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=7" title="Edit section: May 30, 2018"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Syntax highlighting is now available for all users inside the 2017 Wikitext Editor on all wikis. In the 2010 wikitext editor we have decided to not fix any of the edge case defects for Internet Explorer or Edge, and we are not going to support IME editing (<a href="https://phabricator.wikimedia.org/T194102" class="extiw" title="phab:T194102">phab:T194102</a>). </p><p>Community Tech is currently focusing all attention on another 6-week project so development will resume in July. We hope to have the feature released by the end of July or early August. You can track the rollout here: <a href="https://phabricator.wikimedia.org/T185030" class="extiw" title="phab:T185030">phab:T185030</a>. </p> <div class="mw-heading mw-heading3"><h3 id="April_30,_2018" data-mw-thread-id="h-April_30,_2018-Status_Updates"><span id="April_30.2C_2018"></span><span data-mw-comment-start="" id="h-April_30,_2018-Status_Updates"></span>April 30, 2018<span data-mw-comment-end="h-April_30,_2018-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=8" title="Edit section: April 30, 2018"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Syntax highlighting will be available without a beta feature for 2017 Wikitext Editor on all Wikimedia projects (LTR and RTL) this week. </p> <div class="mw-heading mw-heading3"><h3 id="April_26,_2018" data-mw-thread-id="h-April_26,_2018-Status_Updates"><span id="April_26.2C_2018"></span><span data-mw-comment-start="" id="h-April_26,_2018-Status_Updates"></span>April 26, 2018<span data-mw-comment-end="h-April_26,_2018-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=9" title="Edit section: April 26, 2018"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>We are nearly ready to graduate this feature from beta on the 2017 wikitext editor for both LTR and RTL languages and the 2010 wikitext editor for LTR languages. We're been working on fixing the last bout of bugs from different browsers+editor combination. </p><p>When graduated from beta, the feature will be available for all users inside the wikitext editor, but will still require enabling by clicking the ✍️ highlighter icon in the toolbar or ≡ menu. </p> <div class="mw-heading mw-heading3"><h3 id="March_7,_2018" data-mw-thread-id="h-March_7,_2018-Status_Updates"><span id="March_7.2C_2018"></span><span data-mw-comment-start="" id="h-March_7,_2018-Status_Updates"></span>March 7, 2018<span data-mw-comment-end="h-March_7,_2018-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=10" title="Edit section: March 7, 2018"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>"Wikitext editor syntax highlighting" has survived as a beta feature for more than six months now. The influx of bug reports we saw when it was first launched has been reduced to a trickle. There are some outstanding bugs that the team is working on fixing. </p><p>Unfortunately, work on getting RTL support is still pending. The issues with RTL lie in the underlying library for the extension, CodeMirror, and need support from the library maintainer to get fixed. The library is undergoing a rewrite after which we will potentially be able to address the RTL issues. The extension is on the <a rel="nofollow" class="external text" href="https://he.wikipedia.beta.wmflabs.org/wiki/עמוד_ראשי">Hebrew beta wiki</a> where the RTL issues can be tested. </p><p>We're hoping to get "Wikitext editor syntax highlighting" out of beta within the next month. The feature will be available for all to use by default as a toolbar option in the 2010 and 2017 Wikitext editors. You can follow <a href="https://phabricator.wikimedia.org/T185030" class="extiw" title="phab:T185030">phab:T185030</a> to stay up-to-date with the developments on this project. </p> <div class="mw-heading mw-heading3"><h3 id="September_19,_2017" data-mw-thread-id="h-September_19,_2017-Status_Updates"><span id="September_19.2C_2017"></span><span data-mw-comment-start="" id="h-September_19,_2017-Status_Updates"></span>September 19, 2017<span data-mw-comment-end="h-September_19,_2017-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=11" title="Edit section: September 19, 2017"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Happy to report that a couple important bugs are fixed! Ctrl-F browser search now works for both the regular edit window and the new wikitext mode, and word jumping using the option+arrow key now works on Mac browsers. </p><p>Fixing browser spellcheck is close to done; we'll be releasing that fix soon. </p><p>We still need to fix an issue with the new wikitext mode not respecting whether the beta feature is turned on or off -- you can turn it off on the Beta features page, but still see it on in the new wikitext mode. You can follow progress on this ticket: <a href="https://phabricator.wikimedia.org/T173480" class="extiw" title="phab:T173480">phab:T173480</a>. </p> <div class="mw-heading mw-heading3"><h3 id="September_7,_2017" data-mw-thread-id="h-September_7,_2017-Status_Updates"><span id="September_7.2C_2017"></span><span data-mw-comment-start="" id="h-September_7,_2017-Status_Updates"></span>September 7, 2017<span data-mw-comment-end="h-September_7,_2017-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=12" title="Edit section: September 7, 2017"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>We're currently working on an important bug -- the Ctrl-F browser search only works if the text you're looking for is currently displayed in the edit window, or just below it. We've been investigating this for the last couple of weeks; here's an update on how it's going. You can follow progress on this ticket: <a href="https://phabricator.wikimedia.org/T174480" class="extiw" title="phab:T174480">phab:T174480</a>. </p><p>We were looking at using the search add-on that GitHub uses in their version of CodeMirror, and it's not an acceptable solution for us. It only works when you've got the cursor in the edit window -- if you're not inside the edit window, ctrl-F still gives you the browser search. That's not very discoverable -- for some people, it would just be broken sometimes. The add-on also uses a combination of ctrl-F to start the search and ctrl-G to move from one highlighted word to another, which is also not very discoverable. So that is a dead end for us. </p><p>We're now investigating a couple other options, including loading the page outside the edit window in the background, after the text in the edit window is displayed. This might slow things down, so we're testing the performance. </p><p>We're still focused on solving this issue; I'm sorry it's not fixed yet. </p> <div class="mw-heading mw-heading3"><h3 id="August_23,_2017" data-mw-thread-id="h-August_23,_2017-Status_Updates"><span id="August_23.2C_2017"></span><span data-mw-comment-start="" id="h-August_23,_2017-Status_Updates"></span>August 23, 2017<span data-mw-comment-end="h-August_23,_2017-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=13" title="Edit section: August 23, 2017"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><a class="external text" href="https://lists.wikimedia.org/pipermail/wikimedia-l/2017-August/088259.html">Some feedback from Andy M.</a> on Wikimedia-L to consider: </p> <dl><dd>"My first impression is that it is lacking in contrast – it's far harder, now, to differentiate the various types of content. Indeed the colour pairs used (e.g. #8800CC vs. #AAAAB3) fail WCAG web accessibility guidelines for colour contrast. I realise that choice of styling colours is a "bikeshed" matter, but contrast ratio is a quantifiable and objective accessibility issue. Also, because the script does not load immediately, the larger headings cause the page to "dance" as the script kicks in."</dd></dl> <div class="mw-heading mw-heading3"><h3 id="August_2,_2017" data-mw-thread-id="h-August_2,_2017-Status_Updates"><span id="August_2.2C_2017"></span><span data-mw-comment-start="" id="h-August_2,_2017-Status_Updates"></span>August 2, 2017<span data-mw-comment-end="h-August_2,_2017-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=14" title="Edit section: August 2, 2017"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Syntax Highlighting has now been released as a Beta feature on all LTR Wikimedia projects! We hope that people love using the new feature. Please leave feedback on the talk page! </p><p>We're still working on making it work for RTL languages; you can follow this progress on this ticket: <a href="https://phabricator.wikimedia.org/T170001" class="extiw" title="phab:T170001">T170001</a>. </p><p>Temporarily turned off, see <a href="https://phabricator.wikimedia.org/T172458" class="extiw" title="phabricator:T172458">phabricator:T172458</a>. </p> <div class="mw-heading mw-heading3"><h3 id="July_18,_2017" data-mw-thread-id="h-July_18,_2017-Status_Updates"><span id="July_18.2C_2017"></span><span data-mw-comment-start="" id="h-July_18,_2017-Status_Updates"></span>July 18, 2017<span data-mw-comment-end="h-July_18,_2017-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=15" title="Edit section: July 18, 2017"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>CodeMirror deployed to Simple English Wikipedia as a Beta Feature. </p> <div class="mw-heading mw-heading3"><h3 id="March_22,_2017" data-mw-thread-id="h-March_22,_2017-Status_Updates"><span id="March_22.2C_2017"></span><span data-mw-comment-start="" id="h-March_22,_2017-Status_Updates"></span>March 22, 2017<span data-mw-comment-end="h-March_22,_2017-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=16" title="Edit section: March 22, 2017"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Team discussion, playing with CodeMirror on <a rel="nofollow" class="external text" href="http://commtech.wmflabs.org/wiki/Test">CommTechwiki</a>. Performance is good, as advertised. We're generally happy with the highlighting choices. We found some bugs, and some elements that should be improved -- for example, ref tags aren't highlighted in the current version. Ryan took a lot of notes, and he'll be working on these issues -- either working with the developers, or making adjustments on our own version. </p> <div class="mw-heading mw-heading3"><h3 id="March_21,_2017" data-mw-thread-id="h-March_21,_2017-Status_Updates"><span id="March_21.2C_2017"></span><span data-mw-comment-start="" id="h-March_21,_2017-Status_Updates"></span>March 21, 2017<span data-mw-comment-end="h-March_21,_2017-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=17" title="Edit section: March 21, 2017"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Ryan talked to Ed S on the Editing team -- they're interested in including the syntax highlighter in the new wikitext editor. This will require some investigation. </p><p>There's a current hacked version by Ed: <a class="external free" href="https://gerrit.wikimedia.org/r/#/c/343878/">https://gerrit.wikimedia.org/r/#/c/343878/</a> </p><p>This version works by loading CodeMirror underneath the WikiText editor surface, making the text and background of the WikiText editor transparent, and syncing user input from the WikiText editor to the CodeMirror surface as it is entered. The problem is that it's sluggish and has syncing issues -- see <a href="https://phabricator.wikimedia.org/T161054" class="extiw" title="phab:T161054">phab:T161054</a> and <a href="https://phabricator.wikimedia.org/T161052" class="extiw" title="phab:T161052">phab:T161052</a> for more. </p> <div class="mw-heading mw-heading3"><h3 id="February_27,_2017" data-mw-thread-id="h-February_27,_2017-Status_Updates"><span id="February_27.2C_2017"></span><span data-mw-comment-start="" id="h-February_27,_2017-Status_Updates"></span>February 27, 2017<span data-mw-comment-end="h-February_27,_2017-Status_Updates"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=18" title="Edit section: February 27, 2017"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>There's an existing extension -- <a href="https://www.mediawiki.org/wiki/Extension:CodeMirror" class="extiw" title="mw:Extension:CodeMirror">Extension:CodeMirror</a> -- that provides wikitext syntax highlighting on demand, adding a button at the top of the wikitext editor to turn highlighting on and off. (This uses a sticky preference so that an editor can turn it on once, and then see it on all future page loads.) The highlighting is acceptably fast, it takes less than a second even on a lengthy article like English WP's Barack Obama page. </p><p>There are two different use cases for syntax highlighting -- essentially, it could be a power editor feature, or a new editor training tool. Very active editors want syntax highlighting to help them edit; if this is the use case that we're focusing on, then we can make it a special preference, and let people decide if they want to use it. If we want to focus on helping new editors, then the feature would have to be on by default, and would require much stricter QA. The comments on the <a href="/wiki/2016_Community_Wishlist_Survey/Categories/Editing#Wikitext_editor_syntax_highlighter" class="mw-redirect" title="2016 Community Wishlist Survey/Categories/Editing">Wishlist proposal and votes</a> indicate that people are requesting the power editor feature. </p><p>With that in mind -- we're planning to deploy CodeMirror as a special preference for the old wikitext editor. This will need some instruction on the preferences page to explain how to use the button & turn it on. </p><p>The VE team is planning to include this in the 2017 wikitext editor as well; we'll talk to Ed S. to see how we can work together. We'll have to make sure we agree on the color choices. In general, we'll be expected to explain the color choices, so we'll look at the existing CodeMirror colors and make sure we understand the rationale. </p><p>Another thing we have to figure out -- how will this work outside of en.wp? </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Important_links" data-mw-thread-id="h-Important_links"><span data-mw-comment-start="" id="h-Important_links"></span>Important links<span data-mw-comment-end="h-Important_links"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=19" title="Edit section: Important links"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="/wiki/2016_Community_Wishlist_Survey/Categories/Editing#Wikitext_editor_syntax_highlighter" class="mw-redirect" title="2016 Community Wishlist Survey/Categories/Editing">Wishlist proposal and votes</a></li> <li><a href="https://phabricator.wikimedia.org/T101246" class="extiw" title="phab:T101246">Phabricator ticket tracking the work</a></li> <li><a href="/wiki/Community_Tech/Wikitext_editor_syntax_highlighting/Notes" class="mw-redirect" title="Community Tech/Wikitext editor syntax highlighting/Notes">Meeting notes</a></li></ul> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Color_and_style_customization" data-mw-thread-id="h-Color_and_style_customization"><span data-mw-comment-start="" id="h-Color_and_style_customization"></span>Color and style customization<span data-mw-comment-end="h-Color_and_style_customization"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=20" title="Edit section: Color and style customization"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r23427738">.mw-parser-output .hatnote{font-style:italic}.mw-parser-output .hatnote i,.mw-parser-output .hatnote.noitalic{font-style:normal}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output div.hatnote+div.hatnote{margin-top:-0.5em}</style> <div role="note" class="hatnote">This is a partial list of the CodeMirror CSS classes. The complete list of default CodeMirror styling definitions is <a class="external text" href="https://phabricator.wikimedia.org/diffusion/ECMI/browse/master/resources/mode/mediawiki/mediawiki.less">on Phabricator</a></div> <p>The colors and styles can be overridden by defining your own colors and styles for the classes in the table below on your common.css page (User:Example/common.css). </p><p>If you're not familiar with editing CSS, see the <a href="#How_to_do_it_for_those_who_have_very_little_understanding_of_css">section for beginners</a> below. </p><p>You can control the appearance of the CodeMirror editing window as a whole using the <code>.CodeMirror-lines</code> CSS class. Use this at your own risk. Some things like changing the <code>line-height</code> will not work in the <a href="https://www.mediawiki.org/wiki/Special:MyLanguage/2017_wikitext_editor" class="extiw" title="mw:Special:MyLanguage/2017 wikitext editor">2017 wikitext editor</a>. Also be aware that rules added for any of the below CSS classes will have precedence. </p> <div style="font-size:12px; font-family:monospace;"> <table class="wikitable" style="background:white"> <tbody><tr> <th>CSS Class(es) </th> <th>Element </th> <th>CodeMirror styling (<a href="https://phabricator.wikimedia.org/diffusion/ECMI/browse/master/resources/mode/mediawiki/mediawiki.css" class="extiw" title="phab:diffusion/ECMI/browse/master/resources/mode/mediawiki/mediawiki.css">CSS</a>) </th> <th><a href="https://en.wikipedia.org/wiki/en:User:Cacycle/wikEd" class="extiw" title="w:en:User:Cacycle/wikEd">wikEd's styling</a> (See <a href="https://en.wikipedia.org/wiki/en:User:Cacycle/wikEd.js" class="extiw" title="en:en:User:Cacycle/wikEd.js">InitFrameCSS</a>) </th> <th><a href="https://en.wikipedia.org/wiki/de:Benutzer:Schnark/js/syntaxhighlight.js" class="extiw" title="w:de:Benutzer:Schnark/js/syntaxhighlight.js">Schnark's styling</a> </th> <th><a href="https://www.mediawiki.org/wiki/User:Remember_the_dot/Syntax_highlighter#Colors" class="extiw" title="mw:User:Remember the dot/Syntax highlighter">Rememberthedot's styling</a> </th></tr> <tr> <td>.cm-mw-skipformatting </td> <td>leading space </td> <td><span style="background-color: #adf;"> </span>foo bar </td> <td><span style="color: #000; background: #e8e8e8;"> foo bar</span> </td> <td><span style="color: #000; background: #E5E5E5;"> foo bar</span> </td> <td> </td></tr> <tr> <td>.cm-mw-list </td> <td>asterisk or number sign </td> <td><span style="color: #08f; font-weight: bold;">*</span> foo bar, <span style="color: #08f; font-weight: bold;">#</span> foo bar </td> <td><span style="color: #000; background: #e8e8e8;">* foo bar</span> <span style="color: #000; background: #e8e8e8;"># foo bar</span> </td> <td><span style="background-color:#E6FFE6; color:#000">*</span> foo bar <span style="background-color:#E6FFE6; color:#000">#</span> foo bar </td> <td><span style="background-color:#EFE; color:#000">*</span> foo bar <span style="background-color:#EFE; color:#000">#</span> foo bar </td></tr> <tr> <td>.cm-mw-signature,<br/> <p>.cm-mw-hr </p> </td> <td>signature, horizontal rule </td> <td><span style="color: #08f; font-weight: bold; background-color: #eee;">∼∼∼∼</span>, <span style="color: #08f; font-weight: bold; background-color: #eee;">----</span> </td> <td><span style="color: #f00; font-weight: bold;">~~~~</span>, <span style="background: #666; color: #ffffff;">----</span> </td> <td><span style="background-color:#FC6; color:#000">~~~~</span>, <span style="background-color:#E5E5E5; color:#000">----</span> </td> <td><span style="background-color:#FC6; color:#000">~~~~</span>, <span style="background-color:#EEE; color:#000">----</span> </td></tr> <tr> <td>.cm-mw-indenting </td> <td>colons </td> <td><span style="color: #08f; font-weight: bold; background-color: #ddd;">:::</span> foo bar </td> <td><span style="color: #000; background: #e8e8e8;">::: foo bar</span> </td> <td><span style="background-color:#E6FFE6; color:#000">:::</span> foo bar </td> <td><span style="background-color:#EFE; color:#000">:::</span> foo bar </td></tr> <tr> <td>.cm-mw-mnemonic </td> <td>HTML entities </td> <td><span style="color: #290;">&amp;</span> </td> <td><span style="color: #000; background: #e8e8e8;">&amp;</span> </td> <td><span style="background-color:#E6FFE6; color:#000">&amp;</span> </td> <td><span style="background-color:#DFD; color:#000">&amp;</span> </td></tr> <tr> <td>.cm-mw-comment </td> <td>HTML comment </td> <td><span style="color: #aaa; font-weight: normal;"></span> </td> <td><span style="background: #fff0d0; color: black; font-weight: normal; font-style: normal; text-decoration: none;"></span> </td> <td><span style="background-color:#E6FFE6; color:#000"></span> </td> <td><span style="background-color:#EFE; color:#000"></span> </td></tr> <tr> <td>.cm-mw-apostrophes-bold,<br/> <p>.cm-mw-apostrophes-italic </p> </td> <td>bold and italic </td> <td><span style="color: #08f">'''</span><b>bold</b><span style="color: #08f">'''</span> <span style="color: #08f">''</span><i>italic</i><span style="color: #08f">''</span> </td> <td><span style="color: #777">'''</span><b>bold</b><span style="color: #777">'''</span> <span style="color: #777">''</span><i>italic</i><span style="color: #777">''</span> </td> <td><span style="background-color:#E5E5E5; color:#000">'''bold'''</span> <span style="background-color:#E5E5E5; color:#000">''italic''</span> </td> <td><span style="background-color:#EEE; color:#000">'''bold'''</span> <span style="background-color:#EEE; color:#000">''italic''</span> </td></tr> <tr> <th colspan="6" style="text-align:left;">Headings </th></tr> <tr> <td>pre.cm-mw-section-1 </td> <td>heading <i>(size not changed in NWE)</i> </td> <td><span style="font-size: 1.8em; line-height: 1.2em;"><span style="color: #08f; font-weight: normal;">=</span> Heading <span style="color: #08f; font-weight: normal;">=</span></span> </td> <td><span style="color: #000; font-weight: bold;">= Heading =</span> </td> <td><span style="background-color:#E5E5E5; color:#000">= Heading =</span> </td> <td><span style="background-color:#EEE; color:#000">= Heading =</span> </td></tr> <tr> <td>pre.cm-mw-section-2 </td> <td>heading <i>(size not changed in NWE)</i> </td> <td><span style="font-size: 1.5em; line-height: 1.2em;"><span style="color: #08f; font-weight: normal;">==</span> Heading <span style="color: #08f; font-weight: normal;">==</span></span> </td> <td><span style="color: #000; font-weight: bold;">== Heading ==</span> </td> <td><span style="background-color:#E5E5E5; color:#000">== Heading ==</span> </td> <td><span style="background-color:#EEE; color:#000">== Heading ==</span> </td></tr> <tr> <td>pre.cm-mw-section-3 </td> <td>heading </td> <td><span style="font-weight: bold;"><span style="color: #08f; font-weight: normal;">===</span> Heading <span style="color: #08f; font-weight: normal;">===</span></span> </td> <td><span style="color: #000; font-weight: bold;">=== Heading ===</span> </td> <td><span style="background-color:#E5E5E5; color:#000">=== Heading ===</span> </td> <td><span style="background-color:#EEE; color:#000">=== Heading ===</span> </td></tr> <tr> <td>pre.cm-mw-section-4 </td> <td>heading </td> <td><span style="font-weight: bold;"><span style="color: #08f; font-weight: normal;">====</span> Heading <span style="color: #08f; font-weight: normal;">====</span></span> </td> <td><span style="color: #000; font-weight: bold;">==== Heading ====</span> </td> <td><span style="background-color:#E5E5E5; color:#000">==== Heading ====</span> </td> <td><span style="background-color:#EEE; color:#000">==== Heading ====</span> </td></tr> <tr> <td>pre.cm-mw-section-5 </td> <td>heading </td> <td><span style="font-weight: bold;"><span style="color: #08f; font-weight: normal;">=====</span> Heading <span style="color: #08f; font-weight: normal;">=====</span></span> </td> <td><span style="color: #000; font-weight: bold;">===== Heading =====</span> </td> <td><span style="background-color:#E5E5E5; color:#000">===== Heading =====</span> </td> <td><span style="background-color:#EEE; color:#000">===== Heading =====</span> </td></tr> <tr> <td>pre.cm-mw-section-6 </td> <td>heading </td> <td><span style="font-weight: bold;"><span style="color: #08f; font-weight: normal;">======</span> Heading <span style="color: #08f; font-weight: normal;">======</span></span> </td> <td><span style="color: #000; font-weight: bold;">====== Heading ======</span> </td> <td><span style="background-color:#E5E5E5; color:#000">====== Heading ======</span> </td> <td><span style="background-color:#EEE; color:#000">====== Heading ======</span> </td></tr> <tr> <td>.cm-mw-section-header </td> <td>equals signs </td> <td><span style="color: #08f; font-weight: normal;">==</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <th colspan="6" style="text-align:left;">Templates </th></tr> <tr> <td><b>example</b> </td> <td> </td> <td><span style="color: #80c; font-weight: bold;">{{<u>cite book</u>|title=</span><span style="color: #80c; font-weight: normal;">foo bar</span><span style="color: #80c; font-weight: bold;">}}</span> </td> <td><span style="color:#777; background:#e8e8e8;">{{</span><span style="background:#e8e8e8; color:#509;">cite book</span><span style="color:#777; background:#e8e8e8;">|</span><span style="color:#666; background:#e8e8e8;">title=</span><span style="background:#e8e8e8; color:#666;">foo bar</span><span style="color:#777; background:#e8e8e8;">}}</span> </td> <td><span style="background-color:#FFC; color:#000">{{cite book|title=foo bar}}</span> </td> <td><span style="background-color:#FFC; color:#000">{{cite book|title=foo bar}}</span> </td></tr> <tr> <td>.cm-mw-template </td> <td>other template content </td> <td><span style="color: #80c; font-weight: normal;">foo bar</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-template-name </td> <td>template name </td> <td><span style="color: #80c; font-weight: bold;"><u>cite book</u></span> </td> <td><span style="background:#e8e8e8; color:#509;">cite book</span> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-template-argument-name </td> <td>template parameters </td> <td><span style="color: #80c; font-weight: bold;">title=</span> </td> <td><span style="color:#666; background:#e8e8e8;">title=</span> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-template-delimiter </td> <td>pipe </td> <td><span style="color: #80c; font-weight: bold;">|</span> </td> <td><span style="color:#777; background:#e8e8e8;">|</span> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-template-bracket </td> <td>opening/closing brackets </td> <td><span style="color: #80c; font-weight: bold;">{{ }}</span> </td> <td><span style="color:#777; background:#e8e8e8;">{{ }}</span> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-template-ground<br/> <p>.cm-mw-template2-ground<br/> .cm-mw-template3-ground </p> </td> <td>whole template<br/> <p>(number is the level of nesting) </p> </td> <td><span style="color: #80c; font-weight: bold;">{{<u>foo</u>|</span><span style="background-color:#fbf5f5;"><span style="color: #80c; font-weight: bold;">{{<u>cite book</u>|title=</span><span style="color: #80c; font-weight: normal;">foo bar</span><span style="color: #80c; font-weight: bold;">}}</span></span><span style="color: #80c; font-weight: bold;">}}</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <th colspan="6" style="text-align:left;">Variables </th></tr> <tr> <td><b>example</b> </td> <td> </td> <td><span style="color: #f50; font-weight: normal;">{{{</span><span style="color: #f50; font-weight: bold;">foo|</span><span style="color: #f50; font-weight: normal;">bar}}}</span> </td> <td><span style="background-color:#e8e8e8; color:#777;">{{{<span style="color:#900;">foo</span>|<span style="color:#000;">bar</span>}}}</span> </td> <td><span style="background-color:#FC6; color:#000;">{{{foo bar}}}</span> </td> <td><span style="background-color:#FC6; color:#000;">{{{foo bar}}}</span> </td></tr> <tr> <td>.cm-mw-templatevariable </td> <td>variable </td> <td><span style="color: #f50; font-weight: normal;">bar</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-templatevariable-name </td> <td>triple-braced variable name </td> <td><span style="color: #f50; font-weight: bold;">foo</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-templatevariable-bracket </td> <td>opening/closing brackets </td> <td><span style="color: #f50; font-weight: normal;">{{{ }}}</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-templatevariable-delimiter </td> <td>pipe </td> <td><span style="color: #f50; font-weight: bold;">|</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <th colspan="6" style="text-align:left;">Parser functions </th></tr> <tr> <td><b>example</b> </td> <td> </td> <td><span style="background-color:#FAF6FC;"><span style="color: #a11; font-weight: bold;">{{#assessment:</span><span style="font-weight: normal;"> A </span> <span style="color: #a11;"> | </span> <span style="font-weight: normal;">High</span> <span style="color: #a11; font-weight: bold;">}}</span></span> </td> <td><span style="background-color:#e8e8e8; color:#777;">{{<span style="color:#f00;">PAGENAME</span>}}</span> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-parserfunction </td> <td>parser function parameters </td> <td><span style="background-color:#FAF6FC;">High</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-parserfunction-name </td> <td>parser function name </td> <td><span style="color: #a11; font-weight: bold;">PAGENAME</span> <span style="color: #a11; font-weight: bold;">#invoke</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-parserfunction-bracket </td> <td>opening/closing brackets </td> <td><span style="color: #a11; font-weight: bold;">{{ }}</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-parserfunction-delimiter </td> <td>delimiter </td> <td><span style="color: #a11; font-weight: bold;">:</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <th colspan="6" style="text-align:left;">Extension tags </th></tr> <tr> <td colspan="6" style="text-align:left;">Note: The extensions can use own styles and rules for highlighting text inside own tags. For example the Cite extension highlights text inside <ref> tags as a wikitext. </td></tr> <tr> <td><b>example</b> </td> <td> </td> <td><span style="color: #290; font-weight: normal;"><</span><span style="color: #290; font-weight: bold;">poem</span> <span style="color: #290; font-weight: normal;">style="padding: 1em;"></span><span style="background-color:#fcfafd;">string</span><div style="display: flex; background-color:#fcfafd;">whole line</div><span style="background-color:#fcfafd;">string</span><span style="color: #290; font-weight: normal;"></</span><span style="color: #290; font-weight: bold;">poem</span><span style="color: #290; font-weight: normal;">></span> </td> <td><span style="background-color:#e8e8e8; color:#777"><ref name="foo"> </ref></span> </td> <td><span style="background-color:#FFE6FF; color:#000"><tag>...</tag></span> </td> <td><span style="background-color:#FEF; color:#000"><tag>...</tag></span> </td></tr> <tr> <td>pre.cm-mw-exttag </td> <td>whole line inside tags </td> <td><div style="display: flex; background-color:#fcfafd;">whole line</div> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-exttag </td> <td>text inside tags </td> <td><span style="background-color:#fcfafd;">string</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-exttag-name </td> <td>tag name </td> <td><span style="color: #290; font-weight: bold;">poem</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-exttag-bracket </td> <td>opening/closing brackets </td> <td><span style="color: #290; font-weight: normal;">< ></span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-exttag-attribute </td> <td>reference attributes </td> <td><span style="color: #290; font-weight: normal;">style="padding: 1em;"</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <th colspan="6" style="text-align:left;">HTML tags </th></tr> <tr> <td><b>example</b> </td> <td> </td> <td><span style="color: #290; font-weight: normal;"><</span><span style="color: #290; font-weight: bold;">span</span> <span style="color: #290; font-weight: normal;">style="foo"></span>foo bar<span style="color: #290; font-weight: normal;"></</span><span style="color: #290; font-weight: bold;">span</span><span style="color: #290; font-weight: normal;">></span> </td> <td><span style="background-color:#e8e8e8; color:#777"><span style="foo"><span style="color:#000;">foo bar</span></span></span> </td> <td><span style="background-color:#FFE6FF; color:#000"><tag style="foo">foo bar</tag></span> </td> <td><span style="background-color:#FEF; color:#000"><tag style="foo">foo bar</tag></span> </td></tr> <tr> <td>.cm-mw-htmltag-name </td> <td>HTML tag </td> <td><span style="color: #290; font-weight: bold;">span</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-htmltag-bracket </td> <td>opening/closing brackets </td> <td><span style="color: #290; font-weight: normal;">< ></span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-htmltag-attribute </td> <td>parameters and values </td> <td><span style="color: #290; font-weight: normal;">style="foo"</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td> </td> <td> <p>superscript subscript </p> </td> <td> <p>foo<span style="color: #290; font-weight: normal;"><</span><span style="color: #290; font-weight: bold;">sup</span><span style="color: #290; font-weight: normal;">></span>bar<span style="color: #290; font-weight: normal;"></</span><span style="color: #290; font-weight: bold;">sup</span><span style="color: #290; font-weight: normal;">></span> foo<span style="color: #290; font-weight: normal;"><</span><span style="color: #290; font-weight: bold;">sub</span><span style="color: #290; font-weight: normal;">></span>bar<span style="color: #290; font-weight: normal;"></</span><span style="color: #290; font-weight: bold;">sub</span><span style="color: #290; font-weight: normal;">></span> </p> </td> <td> <p>Foo<span style="position: relative; bottom: 0.3em;"><span style="color: #777;"><sup></span>bar<span style="color: #777;"></sup></span><br/> </span>Foo<span style="position: relative; top: 0.3em;"><span style="color: #777;"><sub></span>bar<span style="color: #777;"></sub></span></span> </p> </td> <td> </td> <td> </td></tr> <tr> <th colspan="6" style="text-align:left;">Pre-formatted text </th></tr> <tr> <td>pre.cm-mw-tag-pre,<br/> <p>.cm-mw-tag-pre </p> </td> <td>pre-formatted text </td> <td><span style="color: #290; font-weight: normal;"><</span><span style="color: #290; font-weight: bold;">pre</span><span style="color: #290; font-weight: normal;">></span><span style="background-color: #f5f5f5">foo bar</span><span style="color: #290; font-weight: normal;"></</span><span style="color: #290; font-weight: bold;">pre</span><span style="color: #290; font-weight: normal;">></span> </td> <td><span style="background-color: #f8e8e8"><pre>foo bar</pre></span> </td> <td><span style="background-color:#FFE6FF; color:#000"><tag>foo bar</tag></span> </td> <td><span style="background-color:#FEF; color:#000"><tag>foo bar</tag></span> </td></tr> <tr> <td>pre.cm-mw-tag-nowiki,<br/> <p>.cm-mw-tag-nowiki </p> </td> <td>nowiki text </td> <td><span style="color: #290; font-weight: normal;"><</span><span style="color: #290; font-weight: bold;">nowiki</span><span style="color: #290; font-weight: normal;">></span><span style="background-color: #f5f5f5">foo bar</span><span style="color: #290; font-weight: normal;"></</span><span style="color: #290; font-weight: bold;">nowiki</span><span style="color: #290; font-weight: normal;">></span> </td> <td><span style="background-color: #f8e8e8"><nowiki>foo bar</nowiki></span> </td> <td><span style="background-color:#FFE6FF; color:#000"><tag>foo bar</tag></span> </td> <td><span style="background-color:#FEF; color:#000"><tag>foo bar</tag></span> </td></tr> <tr> <th colspan="6" style="text-align:left;">Internal links </th></tr> <tr> <td><b>example</b> </td> <td> </td> <td> <p><span style="background-color:#e9e9ed;"><span style="color: #36c; font-weight: normal;">[[</span><span style="color: #36c; font-weight: normal; text-decoration: underline;">foo bar</span><span style="color: #36c; font-weight: normal;">]]</span></span> <span style="background-color:#e9e9ed;"><span style="color: #36c; font-weight: normal;">[[</span><span style="color: #36c; font-weight: normal; text-decoration: underline;">foo</span><span style="color: #36c; font-weight: normal;">#</span><span style="color: #18e; font-weight: normal;">section</span><span style="color: #36c; font-weight: normal;">|</span>bar<span style="color: #36c; font-weight: normal;">]]</span></span> </p> </td> <td> <p><span style="background-color:#e8e8e8; color:#777;">[[<span style="font-weight:bold; color:#00a;">foo bar</span>]]</span> <span style="background-color:#e8e8e8; color:#777;">[[<span style="color: #00a;">foo#section</span>|<span style="font-weight:bold; color:#00a;">bar</span>]]</span> </p> </td> <td> <p><span style="background-color:#E6E6FF; color:#000">[[foo bar]]</span> <span style="background-color:#E6E6FF; color:#000">[[foo#section|bar]]</span> </p> </td> <td> <p><span style="background-color:#EEF; color:#000">[[foo bar]]</span> <span style="background-color:#EEF; color:#000">[[foo#section|bar]]</span> </p> </td></tr> <tr> <td>.cm-mw-link-pagename </td> <td>internal link target </td> <td><span style="color: #36c; font-weight: normal;">foo bar</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-link </td> <td># character </td> <td><span style="color: #36c; font-weight: normal;">#</span><span style="color: #18e; font-weight: normal;">section</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-link-tosection </td> <td>characters after the # </td> <td><span style="color: #36c; font-weight: normal;">#</span><span style="color: #18e; font-weight: normal;">section</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-link-bracket </td> <td>opening/closing brackets </td> <td><span style="color: #36c; font-weight: normal;">[[ ]]</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-link-text </td> <td>link label </td> <td><i>(no additional formatting)</i> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-link-delimiter </td> <td>pipe </td> <td><span style="color: #36c; font-weight: normal;">|</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-pagename </td> <td>internal link targets </td> <td><span style="text-decoration: underline">foo bar</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <th colspan="6" style="text-align:left;">External links </th></tr> <tr> <td><b>example</b> </td> <td> </td> <td> <p><span style="color: #36c; font-weight: bold;">https://</span><span style="color: #36c; font-weight: normal;">www.example.org</span> <span style="background-color: #ece8ee"><span style="color: #36c; font-weight: bold;">[https://</span><span style="color: #36c; font-weight: normal;">www.example.org</span><span style="color: #36c; font-weight: bold;">]</span></span> <span style="background-color: #ece8ee"><span style="color: #36c; font-weight: bold;">[https://</span><span style="color: #36c; font-weight: normal;">www.example.org</span> example.org<span style="color: #36c; font-weight: bold;">]</span></span> </p> </td> <td> <p><span style="color:#00e; font-weight:bold;">https://www.example.org</span> <span style="color: #777">[</span><span style="color:#00e">https://www.example.org</span><span style="color: #777">]</span> <span style="color: #777">[</span><span style="color:#00e">https://www.example.org</span> <span style="color:#00e; font-weight:bold;">example.org</span><span style="color: #777">]</span> </p> </td> <td> <p><span style="background-color:#E6FFFF; color:#000">https://example.org</span> <span style="background-color:#E6FFFF; color:#000">[https://example.org]</span> <span style="background-color:#E6FFFF; color:#000">[https://example.org example.org]</span> </p> </td> <td> <p><span style="background-color:#EFF; color:#000">https://example.org</span> <span style="background-color:#EFF; color:#000">[https://example.org]</span> <span style="background-color:#EFF; color:#000">[https://example.org example.org]</span> </p> </td></tr> <tr> <td>.cm-mw-extlink,<br/> <p>.cm-mw-free-extlink </p> </td> <td>external link target </td> <td><span style="color: #36c; font-weight: normal;">www.example.org</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-extlink-protocol,<br/> <p>.cm-mw-free-extlink-protocol </p> </td> <td>protocol </td> <td><span style="color: #36c; font-weight: bold;">https://</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-extlink-text </td> <td>link label </td> <td><i>(no additional formatting)</i> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-extlink-bracket </td> <td>opening/closing brackets </td> <td><span style="color: #36c; font-weight: bold;">[ ]</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <th colspan="6" style="text-align:left;">Tables </th></tr> <tr> <td><b>example</b> </td> <td> </td> <td> <p><span style="color:#e0e; font-weight: bold;">{|</span> <span style="color:#e0e;">class="wikitable"</span> <span style="color:#e0e; font-weight: bold;">|-</span> <span style="color:#e0e; font-weight: bold;">!</span> <span style="font-weight: bold;">Header text</span> <span style="color:#e0e; font-weight: bold;">!!</span> <span style="font-weight: bold;">Header text</span> <span style="color:#e0e; font-weight: bold;">|-</span> <span style="color:#e0e; font-weight: bold;">|</span> Example <span style="color:#e0e; font-weight: bold;">||</span> Example <span style="color:#e0e; font-weight: bold;">|}</span> </p> </td> <td> <p><span style="color:#888; background: #ccc;">{| class="wikitable"</span> <span style="color:#888; background: #ccc;">|-</span> <span style="color:#888; background: #ccc;">!</span><span style="font-weight: bold; background-color:#e8e8e8;"> Header text </span><span style="color:#888; background: #ccc;">!!</span><span style="font-weight: bold; background-color:#e8e8e8;"> Header text </span> <span style="color:#888; background: #ccc;">|-</span> <span style="color:#888; background: #ccc;">|</span><span style="color: #000; background: #f0f0f0;"> Example </span><span style="color:#888; background: #ccc;">||</span><span style="color: #000; background: #f0f0f0;"> Example </span> <span style="color:#888; background: #ccc;">|}</span> </p> </td> <td> <p><span style="color:#000; background: #FFFFCC;">{| class="wikitable"</span> <span style="color:#000; background: #FFCC66;">|-</span> <span style="color:#000; background: #FFCC66;">!</span><span style="background-color:#FFFFCC;"> Header text </span><span style="color:#000; background: #FFCC66;">!!</span><span style="background-color:#FFFFCC;"> Header text </span> <span style="color:#000; background: #FFCC66;">|-</span> <span style="color:#000; background: #FFCC66;">|</span><span style="color: #000; background: #FFFFCC;"> Example </span><span style="color:#000; background: #FFCC66;">||</span><span style="color: #000; background: #FFFFCC;"> Example </span> <span style="color:#000; background: #FFFFCC;">|}</span> </p> </td> <td> <p><span style="background-color:#FFC; color:#000">{| class="wikitable"<br/> |-<br/> ! Header text !! Header text<br/> |-<br/> | Example || Example<br/> |}</span> </p> </td></tr> <tr> <td>.cm-mw-table-bracket </td> <td>opening/closing brackets and pipe </td> <td><span style="color: #e0e; font-weight: bold;">{| |}</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-table-delimiter </td> <td>row and column separators </td> <td><span style="color: #e0e; font-weight: bold;">| |- !</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-table-definition </td> <td>table classes and styles </td> <td><span style="color: #e0e; font-weight: normal;">class="wikitable"</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <td>.cm-mw-table-caption </td> <td>header cell text </td> <td><span style="color: #e0e; font-weight: bold;">!</span><span style="font-weight: bold;">caption</span> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <th colspan="6" style="text-align:left;">Non-CodeMirror </th></tr> <tr> <td> </td> <td>magic words </td> <td><span style="color: #08f; font-weight: bold; background-color: #eee;">__TOC__</span> </td> <td><span style="color: #666; font-weight: bold; background: #e8e8e8;">__TOC__</span> </td> <td><span style="color: #000; background: #E5E5E5;">__TOC__</span> </td> <td> </td></tr> <tr> <td> </td> <td>semi-colon (d.term) </td> <td> </td> <td> </td> <td><span style="background-color:#E6FFE6; color:#000">;</span> foo bar </td> <td> </td></tr> <tr> <td>(treated as extension tag) </td> <td>math </td> <td><span style="color: #290; font-weight: normal;"><</span><span style="color: #290; font-weight: bold;">math</span><span style="color: #290; font-weight: normal;">></span><span style="background-color:#fcfafd;">\sum_{i=0}^\infty 2^{-i}</span><span style="color: #290; font-weight: normal;"></</span><span style="color: #290; font-weight: bold;">math</span><span style="color: #290; font-weight: normal;">></span> </td> <td><span style="background: #e8f0ff;"><math>\sum_{i=0}^\infty 2^{-i}</math></span> </td> <td><span style="background-color:#FFE6FF; color:#000"><tag>foo bar</tag></span> </td> <td><span style="background-color:#FEF; color:#000"><tag>foo bar</tag></span> </td></tr> <tr> <td>(treated as extension tag) </td> <td>syntaxhighlight (former score) </td> <td><span style="color: #290; font-weight: normal;"><</span><span style="color: #290; font-weight: bold;">syntaxhighlight</span><span style="color: #290; font-weight: normal;">></span><span style="background-color:#fcfafd;">...</span><span style="color: #290; font-weight: normal;"></</span><span style="color: #290; font-weight: bold;">syntaxhighlight</span><span style="color: #290; font-weight: normal;">></span> </td> <td><span style="background: #fff8e0;"><syntaxhighlight>...</syntaxhighlight></span> </td> <td><span style="background-color:#FFE6FF; color:#000"><tag>foo bar</tag></span> </td> <td><span style="background-color:#FEF; color:#000"><tag>foo bar</tag></span> </td></tr> <tr> <td>(treated as internal link) </td> <td>category </td> <td><span style="background-color:#e9e9ed;"><span style="color: #36c; font-weight: normal;">[[</span><span style="color: #36c; font-weight: normal; text-decoration: underline;">category:foo bar</span><span style="color: #36c; font-weight: normal;">]]</span></span> </td> <td><span style="background: #ccc; color: #777;">[[<span style="color: #000;">category:</span><span style="color:#00e;">foo bar</span>]]</span> </td> <td><span style="background-color:#E6E6FF; color:#000">[[category:foo bar]]</span> </td> <td><span style="background-color:#EEF; color:#000">[[category:foo bar]]</span> </td></tr> <tr> <td> </td> <td>file preview </td> <td> </td> <td><i>(file preview at the right-hand edge)</i> </td> <td> </td> <td> </td></tr> <tr> <td> </td> <td>character disambig<br/> <p>(nbsp thinsp ndash mdash minus etc.) </p> </td> <td> </td> <td><span class="mw-default-size" typeof="mw:File"><a href="/wiki/File:WikEd_character_disambiguation.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/c/cb/WikEd_character_disambiguation.png" decoding="async" width="64" height="22" class="mw-file-element" data-file-width="64" data-file-height="22"/></a></span> (screenshot) </td> <td>- <span style="background: #E5E5E5;">–</span> <span style="background: #FFE6FF;">—</span> <span style="background: #FFFFCC;">−</span> </td> <td> </td></tr></tbody></table> </div> <div class="mw-heading mw-heading3"><h3 id="How_to_do_it_for_those_who_have_very_little_understanding_of_css" data-mw-thread-id="h-How_to_do_it_for_those_who_have_very_little_understanding_of_css-Color_and_style_customization"><span data-mw-comment-start="" id="h-How_to_do_it_for_those_who_have_very_little_understanding_of_css-Color_and_style_customization"></span>How to do it for those who have very little understanding of css<span data-mw-comment-end="h-How_to_do_it_for_those_who_have_very_little_understanding_of_css-Color_and_style_customization"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&action=edit&section=21" title="Edit section: How to do it for those who have very little understanding of css"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>Open the page [[Special:MyPage/common.css]] on the wiki where you want this to apply (use <a href="https://meta.wikimedia.org/wiki/Special:MyPage/global.css" class="extiw" title="m:Special:MyPage/global.css">m:Special:MyPage/global.css</a> for all wikis alltogether instead).</li></ul> <ul><li>An example is shown for lists (<code>*</code> and <code>#</code>). Add a line <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">.</span><span class="nc">cm-mw-list</span><span class="w"> </span><span class="p">{</span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">green</span><span class="p">;</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;}</span> </pre></div> at the bottom (the cm-mw-list comes from the second table line in the table above). Save. Open some highlighted edit page and try lists - * and #. <i>Green</i> and <i>red</i> can be substituted by the colours you prefer, for example rgb #123456.</li> <li>Save and test by viewing an edit window on the same wiki where there is a list so you can see if it is working as expected. (the background of the symbol should be green and the symbol red).</li> <li>Edit your common.css to change the <a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">colours</a> to whatever you prefer, and save again.</li> <li>Do the same thing for all the changes you want, using the code from the first column of the table and the appropriate colours of your choice.</li> <li>If you need to change to a different set of colours for special purposes occasionally, you can comment out the one set of css code using regular /* ... */ block comments and add another set. To change back, switch the comment code from the one set to the other. This is a bit of a pain, but better than not having the choice.</li> <li>If you prefer some color scheme on many wikis and another on one or two, use local file as explained on them – it will override the global one.</li></ul>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?useformat=desktop&type=1x1&usesul3=0" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://meta.wikimedia.org/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&oldid=27777905">https://meta.wikimedia.org/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&oldid=27777905</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Categories</a>: <ul><li><a href="/wiki/Category:Community_Tech_-_Community_wishlist_projects" title="Category:Community Tech - Community wishlist projects">Community Tech - Community wishlist projects</a></li><li><a href="/wiki/Category:Community_Tech" title="Category:Community Tech">Community Tech</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 16 November 2024, at 07:47.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. See <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> for details.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Meta:About">About Meta</a></li> <li id="footer-places-disclaimers"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/meta.wikimedia.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//meta.m.wikimedia.org/w/index.php?title=Community_Wishlist_Survey_2016/CodeMirror&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-549b5bbb9c-rbc4s","wgBackendResponseTime":130,"wgDiscussionToolsPageThreads":[{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Rationale","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Status_Updates","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-March_26,_2024-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-September_13,_2023-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-March_9,_2022-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-June_14,_2018-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-May_30,_2018-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-April_30,_2018-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-April_26,_2018-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-March_7,_2018-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-September_19,_2017-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-September_7,_2017-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-August_23,_2017-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-August_2,_2017-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-July_18,_2017-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-March_22,_2017-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-March_21,_2017-Status_Updates","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-February_27,_2017-Status_Updates","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Important_links","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Color_and_style_customization","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-How_to_do_it_for_those_who_have_very_little_understanding_of_css-Color_and_style_customization","replies":[]}]}],"wgPageParseReport":{"discussiontools":{"limitreport-timeusage":"0.038"},"limitreport":{"cputime":"0.549","walltime":"0.901","ppvisitednodes":{"value":3181,"limit":1000000},"postexpandincludesize":{"value":9780,"limit":2097152},"templateargumentsize":{"value":2052,"limit":2097152},"expansiondepth":{"value":14,"limit":100},"expensivefunctioncount":{"value":2,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":11104,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 169.911 1 -total"," 46.69% 79.327 1 Template:Wikimedia_engineering_project_information"," 36.18% 61.474 1 Template:Infobox"," 26.96% 45.810 16 Template:DateT"," 25.19% 42.802 16 Template:Date"," 20.67% 35.122 3 Template:Tracked"," 18.10% 30.759 16 Template:I18n_month"," 6.98% 11.858 1 Template:Pg"," 6.97% 11.836 4 Template:Dir"," 6.47% 10.991 1 Template:Ptag"]},"scribunto":{"limitreport-timeusage":{"value":"0.030","limit":"10.000"},"limitreport-memusage":{"value":1241570,"limit":52428800}},"cachereport":{"origin":"mw-web.eqiad.main-7649cfcddd-6ds52","timestamp":"20241127121907","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>