Digital Intelligenz Digital Intelligenz
Digital Intelligenz Digital Intelligenz
loading
  1. Home
  2. Docy Documentation
  3. Code Syntax Highlight
  4. Code Dark Theme
Updated on May 8, 2020
  1. Home
  2. Docy Documentation
  3. Code Syntax Highlight
  4. Code Dark Theme
Updated on May 8, 2020
Docy Documentation
  • Folder icon closed Folder open iconElements
    • Tabs Widget
    • Notice / Message Widget
    • Accordions Widget
    • Cheatsheet Widget
    • Image Hotspots Widget
  • Folder icon closed Folder open iconLayouts
    • Aesthetic Banner Design
    • No Search Banner
    • Full-width Layout
    • Comment Closed
  • Folder icon closed Folder open iconContent
    • Video Widget
    • Tooltip & Direction
    • Password Protected doc
    • Keyboard Shortcuts
    • Editor Contents
      • Style Guide
  • Folder icon closed Folder open iconCode Syntax Highlight
    • Code Dark Theme
    • Code Tomorrow Theme
    • Code Okaidia Theme
    • Code Twilight Theme
  • Folder icon closed Folder open iconFootnotes
    • Footnote 2 Columns
    • Footnote 3 Columns
    • Footnote 4 Columns
  • Folder icon closed Folder open iconChangelogs
    • Changelogs Timeline
    • Second Depth
    • Demo Import
    • Plugins Installation
  • Folder icon closed Folder open iconFAQs
    • How to Paginate a Post?
    • How to set site’s favicon?
    • How to apply custom CSS code.
    • New Doc TItle

Code Dark Theme

Estimated reading: 1 minute 2069 views

Inline code

Wrap inline snippets of code with<code>. Be sure to escape HTML angle brackets.

For example, <section>should be wrapped as inline.
				
					For example, <code><section></code> should be wrapped as inline.
				
			

Code blocks

Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

				
					<ul class="list-unstyled f_social_icon">
    <li><a href="#"><i class="social_facebook"><i><a><li>
    <li><a href="#"><i class="social_twitter"><i><a><li>
    <li><a href="#"><i class="social_vimeo"><i><a><li>
    <li><a href="#"><i class="social_linkedin"><i><a><li>
<ul>
				
			

CSS Code

				
					.footnotes-link::before {
    display: none;
}

.footnotes-link {
    color: #10b3d6;
}

.tip_content p {
    font-size: 14px;
}

.tip_content p:last-child {
    margin-bottom: 0;
}

.footnotes_item strong {
    position: relative;
}

span.top-arrow {
    position: absolute;
    top: -3px;
}
				
			

JavaScript Code

				
					$(".img_popup").each(function () {
    $(".img_popup").magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        closeBtnInside: false,
        fixedContentPos: true,
        removalDelay: 300,
        mainClass: 'mfp-no-margins mfp-with-zoom',
        image: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0, 1]
        }
    });
})
				
			
  • Tagged:
  • Code
  • Doc
  • Layout

Still stuck? How can we help?

How can we help?

Was this page helpful? Yes 6 No

Related articles

  • Tabs Widget
  • Footnote 3 Columns
  • Full-width Layout
  • Cheatsheet Widget
  • Optimize Images
  • Code Okaidia Theme
  • Notice / Message Widget
  • Image Hotspots Widget
  • Code Twilight Theme
  • Aesthetic Banner Design
  • Code Default Theme
  • No Search Banner
  • Table Widget
  • Accordions Widget
  • Footnote 4 Columns
  • Code Tomorrow Theme
  • Footnote Default
  • See More

Leave a Comment Cancel reply

Share this Doc

Code Dark Theme

Or copy link

Clipboard Icon
CONTENTS

Powered By EazyDocs

Doc Contents

Doc Footnotes

Doc Elements

© 2025 All Rights Reserved by Spider-Themes