How to enable the View Source of the Page functionality / button

[lukaszgiez]

Hello,

For some time now, I have noticed the new functionality on Material for Mkdocs tutorial pages: the View Source of the Page button, which then displays markdown code. How can I enable it on my markdown pages in Material?

[squidfunk]

Update: this functionality is available as of 9.0.

---

This is a custom override. I have no plans adding this functionality, because it is solely useful for projects that need you to inspect the Markdown of the page, and there are only a handful of them. Here's the override:

mkdocs-material/src/overrides/partials/content.html

Lines 23 to 41 in 2892706

	<!-- Edit and view button -->
	{% if page.edit_url %}
	{% set edit = "https://github.com/squidfunk/mkdocs-material/edit" %}
	{% set view = "https://raw.githubusercontent.com/squidfunk/mkdocs-material" %}
	<a
	href="{{ page.edit_url }}"
	title="{{ lang.t('edit.link.title') }}"
	class="md-content__button md-icon"
	>
	{% include ".icons/material/file-edit-outline.svg" %}
	</a>
	<a
	href="{{ page.edit_url | replace(edit, view) }}"
	title="View source of this page"
	class="md-content__button md-icon"
	>
	{% include ".icons/material/file-eye-outline.svg" %}
	</a>
	{% endif %}

You can follow the customization guide to apply it yourself.

[Juke34]

I have tried both. As I had the problematic behaviour I described above with the new version (via content.action.view and content.code.annotate in the yml file), I then tried via the overrides approach, which was also not successful neither.

[squidfunk]

Without knowing exactly how you configured Material for MkDocs, we can only guess (as I just did). You can provide a minimal reproduction, we can then look into it. For this, please consult our reproduction guide.

[squidfunk]

Additionally, please consult MkDocs documentation on edit_uri – it's very flexible.

[Juke34]

Thank you for your help.
Would the access to my current project be sufficient here?
I didn't know about edit_uri, it sounds perfect to find a way to fix the url. I will give a try.

[Juke34]

Great edit_uri works perfectly! Thank again @squidfunk for your kind help.
If any other have the same problem () here is the way to go:

add edit_uri: edit/main/pages/ in mkdocs.yml where main is the branch in the repo and pages is the value docs_dir: pages/ set in the mkdocs.yml . If you didn't use the docs_dir parameter you must use docs instead .

[samzong]

this a good desgin for me.

[gledos]

Very useful feature, hopefully it will be mentioned directly in the https://squidfunk.github.io/mkdocs-material/setup/adding-a-git-repository/ page.

[squidfunk]

The view source functionality was added in 28d64a289. It's part of Material for MkDocs 9, which is tracked in #4714. The edit and view source button now need to be enabled explicitly:

theme:
  features:
    - content.action.edit
    - content.action.view

[nothingface0]

Thanks, I was wondering what happened when I upgraded from version 8!

[squidfunk]

It's all documented in our upgrade guide.

[abhibeckert]

it is solely useful for projects that need you to inspect the Markdown of the page, and there are only a handful of them

I don't agree with that. One of the main reasons markdown is popular is because the source is human readable, and therefore it should be possible to read it (otherwise, why use Markdown?)

Github isn't the only project management system with a web interface. Almost all of them have that feature.

It's all documented in our upgrade guide.

It's mentioned there, but not properly documented. I haven't been able to get it to work yet (I'm sure I'm just missing something obvious, but I'll figure it out).

[XobSod]

@abhibeckert
Did you manage to get it to work?
Simply adding

theme:
  features:
    - content.action.edit
    - content.action.view

does nothing.
I am on:

»  pip show mkdocs-material
Name: mkdocs-material
Version: 9.1.18

[niclasheinz]

There is the Documentation: https://squidfunk.github.io/mkdocs-material/setup/adding-a-git-repository/?h=edit+url#code-actions